itowns 2.45.1-next.0 → 2.45.1-next.1

package/lib/Core/View.js

@@ -0,0 +1,1115 @@
+import * as THREE from 'three';
+import { CRS, Coordinates } from '@itowns/geographic';
+import Camera from "../Renderer/Camera.js";
+import initializeWebXR from "../Renderer/WebXR.js";
+import MainLoop, { MAIN_LOOP_EVENTS, RENDERING_PAUSED } from "./MainLoop.js";
+import Capabilities from "./System/Capabilities.js";
+import { COLOR_LAYERS_ORDER_CHANGED } from "../Renderer/ColorLayersOrdering.js";
+import c3DEngine from "../Renderer/c3DEngine.js";
+import RenderMode from "../Renderer/RenderMode.js";
+import FeaturesUtils from "../Utils/FeaturesUtils.js";
+import { getMaxColorSamplerUnitsCount } from "../Renderer/LayeredMaterial.js";
+import Scheduler from "./Scheduler/Scheduler.js";
+import Picking from "./Picking.js";
+import LabelLayer from "../Layer/LabelLayer.js";
+import ObjectRemovalHelper from "../Process/ObjectRemovalHelper.js";
+export const VIEW_EVENTS = {
+  /**
+   * Fires when all the layers of the view are considered initialized.
+   * Initialized in this context means: all layers are ready to be
+   * displayed (no pending network access, no visual improvement to be
+   * expected, ...).
+   * If you add new layers, the event will be fired again when all
+   * layers are ready.
+   * @event View#layers-initialized
+   * @property type {string} layers-initialized
+   */
+  LAYERS_INITIALIZED: 'layers-initialized',
+  LAYER_REMOVED: 'layer-removed',
+  LAYER_ADDED: 'layer-added',
+  INITIALIZED: 'initialized',
+  COLOR_LAYERS_ORDER_CHANGED,
+  CAMERA_MOVED: 'camera-moved',
+  DISPOSED: 'disposed'
+};
+
+/**
+ * Fired on current view's domElement when double right-clicking it. Copies all properties of the second right-click
+ * MouseEvent (such as cursor position).
+ * @event View#dblclick-right
+ * @property {string} type  dblclick-right
+ */
+
+function _preprocessLayer(view, layer, parentLayer) {
+  const source = layer.source;
+  if (parentLayer && !layer.extent) {
+    layer.extent = parentLayer.extent;
+    if (source && !source.extent) {
+      source.extent = parentLayer.extent;
+    }
+  }
+  if (layer.isGeometryLayer && !layer.isLabelLayer) {
+    // Find crs projection layer, this is projection destination
+    layer.crs = view.referenceCrs;
+  } else if (!layer.crs) {
+    if (parentLayer && parentLayer.tileMatrixSets && parentLayer.tileMatrixSets.includes(source.crs)) {
+      layer.crs = source.crs;
+    } else {
+      layer.crs = parentLayer && parentLayer.extent.crs;
+    }
+  }
+  if (layer.isLabelLayer) {
+    view.mainLoop.gfxEngine.label2dRenderer.registerLayer(layer);
+  } else if (layer.labelEnabled || layer.addLabelLayer) {
+    if (layer.labelEnabled) {
+      // eslint-disable-next-line no-console
+      console.info('layer.labelEnabled is deprecated use addLabelLayer, instead of');
+    }
+    // Because the features are shared between layer and labelLayer.
+    layer.buildExtent = true;
+    // label layer needs 3d data structure.
+    layer.structure = '3d';
+    const labelLayer = new LabelLayer(`${layer.id}-label`, {
+      source,
+      style: layer.style,
+      zoom: layer.zoom,
+      performance: layer.addLabelLayer.performance,
+      crs: source.crs,
+      visible: layer.visible,
+      margin: 15,
+      forceClampToTerrain: layer.addLabelLayer.forceClampToTerrain
+    });
+    layer.addEventListener('visible-property-changed', () => {
+      labelLayer.visible = layer.visible;
+    });
+    const removeLabelLayer = e => {
+      if (e.layerId === layer.id) {
+        view.removeLayer(labelLayer.id);
+      }
+      view.removeEventListener(VIEW_EVENTS.LAYER_REMOVED, removeLabelLayer);
+    };
+    view.addEventListener(VIEW_EVENTS.LAYER_REMOVED, removeLabelLayer);
+    layer.whenReady = layer.whenReady.then(() => {
+      view.addLayer(labelLayer);
+      return layer;
+    });
+  }
+  if (layer.isOGC3DTilesLayer) {
+    layer._setup(view);
+  }
+  return layer;
+}
+const _eventCoords = new THREE.Vector2();
+const matrix = new THREE.Matrix4();
+const screen = new THREE.Vector2();
+const ray = new THREE.Ray();
+const direction = new THREE.Vector3();
+const positionVector = new THREE.Vector3();
+const coordinates = new Coordinates('EPSG:4326');
+const viewers = [];
+// Size of the camera frustrum, in meters
+let screenMeters;
+let id = 0;
+
+/**
+ * @property {number} id - The id of the view. It's incremented at each new view instance, starting at 0.
+ * @property {HTMLElement} domElement - The domElement holding the canvas where the view is displayed
+ * @property {String} referenceCrs - The coordinate reference system of the view
+ * @property {MainLoop} mainLoop - itowns mainloop scheduling the operations
+ * @property {THREE.Scene} scene - threejs scene of the view
+ * @property {Camera} camera - itowns camera (that holds a threejs camera that is directly accessible with View.camera3D)
+ * @property {THREE.Camera} camera3D - threejs camera that is stored in itowns camera
+ * @property {THREE.WebGLRenderer} renderer - threejs webglrenderer rendering this view
+ */
+class View extends THREE.EventDispatcher {
+  #layers = [];
+  #pixelDepthBuffer = (() => new Uint8Array(4))();
+  #fullSizeDepthBuffer;
+  /**
+   * Constructs an Itowns View instance
+   *
+   * @example <caption><b>Create a view with a custom Three.js camera.</b></caption>
+   * var viewerDiv = document.getElementById('viewerDiv');
+   * var customCamera = itowns.THREE.PerspectiveCamera();
+   * var view = itowns.View('EPSG:4326', viewerDiv, { camera: { cameraThree: customCamera } });
+   *
+   * @example <caption><b>Create a view with an orthographic camera, and grant it with Three.js custom controls.</b></caption>
+   * var viewerDiv = document.getElementById('viewerDiv');
+   * var view = itowns.View('EPSG:4326', viewerDiv, { camera: { type: itowns.CAMERA_TYPE.ORTHOGRAPHIC } });
+   * var customControls = itowns.THREE.OrbitControls(view.camera3D, viewerDiv);
+   *
+   * @param {String} crs - The default CRS of Three.js coordinates. Should be a cartesian CRS.
+   * @param {HTMLElement} viewerDiv - Where to instanciate the Three.js scene in the DOM
+   * @param {Object} [options] - Optional properties.
+   * @param {Object} [options.camera] - Options for the camera associated to the view. See {@link Camera} options.
+   * @param {MainLoop} [options.mainLoop] - {@link MainLoop} instance to use, otherwise a default one will be constructed
+   * @param {WebGLRenderer|Object} [options.renderer] - {@link WebGLRenderer} instance to use, otherwise
+   * a default one will be constructed. In this case, if options.renderer is an object, it will be used to
+   * configure the renderer (see {@link c3DEngine}.  If not present, a new &lt;canvas> will be created and
+   * added to viewerDiv (mutually exclusive with mainLoop)
+   * @param {Object} [options.webXR] - enable webxr button to switch on VR visualization.
+   * @param {number} [options.webXR.scale=1.0] - apply webxr scale tranformation.
+   * @param {Scene} [options.scene3D] - [THREE.Scene](https://threejs.org/docs/#api/en/scenes/Scene) instance to use, otherwise a default one will be constructed
+   * @param {Color} [options.diffuse] - [THREE.Color](https://threejs.org/docs/?q=color#api/en/math/Color) Diffuse color terrain material.
+   * This color is applied to terrain if there isn't color layer on terrain extent (by example on pole).
+   * @param {boolean} [options.enableFocusOnStart=true] - enable focus on dom element on start.
+   */
+  constructor(crs, viewerDiv) {
+    let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    if (!viewerDiv) {
+      throw new Error('Invalid viewerDiv parameter (must non be null/undefined)');
+    }
+    super();
+    this.domElement = viewerDiv;
+    this.id = id++;
+    this.referenceCrs = crs;
+    let engine;
+    // options.renderer can be 2 separate things:
+    //   - an actual renderer (in this case we don't use viewerDiv)
+    //   - options for the renderer to be created
+    if (options.renderer && options.renderer.domElement) {
+      engine = new c3DEngine(options.renderer);
+    } else {
+      engine = new c3DEngine(viewerDiv, options.renderer);
+    }
+    this.mainLoop = options.mainLoop || new MainLoop(new Scheduler(), engine);
+    this.scene = options.scene3D || new THREE.Scene();
+    if (!options.scene3D) {
+      this.scene.matrixWorldAutoUpdate = false;
+    }
+    this.camera = new Camera(this.referenceCrs, this.mainLoop.gfxEngine.getWindowSize().x, this.mainLoop.gfxEngine.getWindowSize().y, options.camera);
+    this._frameRequesters = {};
+    this._resizeListener = () => this.resize();
+    window.addEventListener('resize', this._resizeListener, false);
+    this._changeSources = new Set();
+    this._delayedFrameRequesterRemoval = [];
+    this._allLayersAreReadyCallback = () => {
+      // all layers must be ready
+      const allReady = this.getLayers().every(layer => layer.ready);
+      if (allReady && this.mainLoop.scheduler.commandsWaitingExecutionCount() == 0 && this.mainLoop.renderingState == RENDERING_PAUSED) {
+        this.dispatchEvent({
+          type: VIEW_EVENTS.LAYERS_INITIALIZED
+        });
+        this.removeFrameRequester(MAIN_LOOP_EVENTS.UPDATE_END, this._allLayersAreReadyCallback);
+      }
+    };
+    this.camera.resize(this.domElement.clientWidth, this.domElement.clientHeight);
+    const fn = () => {
+      this.removeEventListener(VIEW_EVENTS.LAYERS_INITIALIZED, fn);
+      this.dispatchEvent({
+        type: VIEW_EVENTS.INITIALIZED
+      });
+    };
+    this.addEventListener(VIEW_EVENTS.LAYERS_INITIALIZED, fn);
+    this.#fullSizeDepthBuffer = new Uint8Array(4 * this.camera.width * this.camera.height);
+
+    // Indicates that view's domElement can be focused (the negative value indicates that domElement can't be
+    // focused sequentially using tab key). Focus is needed to capture some key events.
+    this.domElement.tabIndex = -1;
+    // Set focus on view's domElement.
+    if (!options.disableFocusOnStart) {
+      this.domElement.focus();
+    }
+
+    // Create a custom `dblclick-right` event that is triggered when double right-clicking
+    let rightClickTimeStamp;
+    this.domElement.addEventListener('mouseup', event => {
+      if (event.button === 2) {
+        // If pressed mouse button is right button
+        // If time between two right-clicks is bellow 500 ms, triggers a `dblclick-right` event
+        if (rightClickTimeStamp && event.timeStamp - rightClickTimeStamp < 500) {
+          this.domElement.dispatchEvent(new MouseEvent('dblclick-right', event));
+        }
+        rightClickTimeStamp = event.timeStamp;
+      }
+    });
+
+    // push all viewer to keep source.cache
+    viewers.push(this);
+    if (options.webXR) {
+      initializeWebXR(this, options.webXR);
+    }
+  }
+
+  /**
+   * Get the Threejs renderer used to render this view.
+   * @returns {THREE.WebGLRenderer} the WebGLRenderer used to render this view.
+   */
+  get renderer() {
+    return this.mainLoop?.gfxEngine?.getRenderer();
+  }
+
+  /**
+   * Get the threejs Camera of this view
+   * @returns {THREE.Camera} the threejs camera of this view
+   */
+  get camera3D() {
+    return this.camera?.camera3D;
+  }
+
+  /**
+   * Dispose viewer before delete it.
+   *
+   * Method dispose all viewer objects
+   * - remove control
+   * - remove all layers
+   * - remove all frame requester
+   * - remove all events
+   * @param {boolean} [clearCache=false] Whether to clear all the caches or not (layers cache, style cache, tilesCache)
+   */
+  dispose() {
+    let clearCache = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    const id = viewers.indexOf(this);
+    if (id == -1) {
+      console.warn('View already disposed');
+      return;
+    }
+    window.removeEventListener('resize', this._resizeListener);
+
+    // controls dispose
+    if (this.controls) {
+      if (typeof this.controls.dispose === 'function') {
+        this.controls.dispose();
+      }
+      delete this.controls;
+    }
+    // remove alls frameRequester
+    this.removeAllFrameRequesters();
+    // remove all layers
+    const layers = this.getLayers(l => !l.isTiledGeometryLayer && !l.isAtmosphere);
+    for (const layer of layers) {
+      this.removeLayer(layer.id, clearCache);
+    }
+    const atmospheres = this.getLayers(l => l.isAtmosphere);
+    for (const atmosphere of atmospheres) {
+      this.removeLayer(atmosphere.id, clearCache);
+    }
+    const tileLayers = this.getLayers(l => l.isTiledGeometryLayer);
+    for (const tileLayer of tileLayers) {
+      this.removeLayer(tileLayer.id, clearCache);
+    }
+    viewers.splice(id, 1);
+    // Remove remaining objects in the scene (e.g. helpers, debug, etc.)
+    this.scene.traverse(ObjectRemovalHelper.cleanup);
+    this.dispatchEvent({
+      type: VIEW_EVENTS.DISPOSED
+    });
+    // remove alls events
+    this.removeAllEvents();
+  }
+
+  /**
+   * Add layer in viewer.
+   * The layer id must be unique.
+   *
+   * The `layer.whenReady` is a promise that resolves when
+   * the layer is done. This promise is also returned by
+   * `addLayer` allowing to chain call.
+   *
+   * @param {LayerOptions|Layer|GeometryLayer} layer The layer to add in view.
+   * @param {Layer=} parentLayer it's the layer to which the layer will be attached.
+   * @return {Promise} a promise resolved with the new layer object when it is fully initialized or rejected if any error occurred.
+   */
+  addLayer(layer, parentLayer) {
+    if (!layer || !layer.isLayer) {
+      return Promise.reject(new Error('Add Layer type object'));
+    }
+    const duplicate = this.getLayerById(layer.id);
+    if (duplicate) {
+      return layer._reject(new Error(`Invalid id '${layer.id}': id already used`));
+    }
+    layer = _preprocessLayer(this, layer, parentLayer);
+    if (parentLayer) {
+      if (layer.isColorLayer) {
+        const layerColors = this.getLayers(l => l.isColorLayer);
+        layer.sequence = layerColors.length;
+        const sumColorLayers = parentLayer.countColorLayersTextures(...layerColors, layer);
+        if (sumColorLayers <= getMaxColorSamplerUnitsCount()) {
+          parentLayer.attach(layer);
+        } else {
+          return layer._reject(new Error(`Cant add color layer ${layer.id}: the maximum layer is reached`));
+        }
+      } else {
+        parentLayer.attach(layer);
+      }
+    } else {
+      if (typeof layer.update !== 'function') {
+        return layer._reject(new Error('Cant add GeometryLayer: missing a update function'));
+      }
+      if (typeof layer.preUpdate !== 'function') {
+        return layer._reject(new Error('Cant add GeometryLayer: missing a preUpdate function'));
+      }
+      this.#layers.push(layer);
+    }
+    if (layer.object3d && !layer.object3d.parent && layer.object3d !== this.scene) {
+      this.scene.add(layer.object3d);
+    }
+    Promise.all(layer._promises).then(() => {
+      layer._resolve();
+      this.notifyChange(parentLayer || layer, false);
+      if (!this._frameRequesters[MAIN_LOOP_EVENTS.UPDATE_END] || !this._frameRequesters[MAIN_LOOP_EVENTS.UPDATE_END].includes(this._allLayersAreReadyCallback)) {
+        this.addFrameRequester(MAIN_LOOP_EVENTS.UPDATE_END, this._allLayersAreReadyCallback);
+      }
+      this.dispatchEvent({
+        type: VIEW_EVENTS.LAYER_ADDED,
+        layerId: layer.id
+      });
+    }, layer._reject);
+    return layer.whenReady;
+  }
+
+  /**
+   * Removes a specific imagery layer from the current layer list. This removes layers inserted with attach().
+   * @example
+   * view.removeLayer('layerId');
+   * @param {string} layerId The identifier
+   * @param {boolean} [clearCache=false] Whether to clear all the layer cache or not
+   * @return {boolean}
+   */
+  removeLayer(layerId, clearCache) {
+    const layer = this.getLayerById(layerId);
+    if (layer) {
+      const parentLayer = layer.parent;
+
+      // Remove and dispose all nodes
+      layer.delete(clearCache);
+
+      // Detach layer if it's attached
+      if (parentLayer && !parentLayer.detach(layer)) {
+        throw new Error(`Error to detach ${layerId} from ${parentLayer.id}`);
+      } else if (parentLayer == undefined) {
+        // Remove layer from viewer
+        this.#layers.splice(this.#layers.findIndex(l => l.id == layerId), 1);
+      }
+      if (layer.isColorLayer) {
+        // Update color layers sequence
+        const imageryLayers = this.getLayers(l => l.isColorLayer);
+        for (const color of imageryLayers) {
+          if (color.sequence > layer.sequence) {
+            color.sequence--;
+          }
+        }
+      }
+
+      // Remove unused cache in all viewers
+
+      // count of times the source is used in all viewer
+      let sharedSourceCount = 0;
+      for (const view of viewers) {
+        // add count of times the source is used in other layers
+        sharedSourceCount += view.getLayers(l => l.source.uid == layer.source.uid && l.crs == layer.crs).length;
+      }
+      // if sharedSourceCount equals to 0 so remove unused cache for this CRS
+      layer.source.onLayerRemoved({
+        unusedCrs: sharedSourceCount == 0 ? layer.crs : undefined
+      });
+      this.notifyChange(this.camera);
+      this.dispatchEvent({
+        type: VIEW_EVENTS.LAYER_REMOVED,
+        layerId
+      });
+      return true;
+    } else {
+      throw new Error(`${layerId} doesn't exist`);
+    }
+  }
+
+  /**
+   * Notifies the scene it needs to be updated due to changes exterior to the
+   * scene itself (e.g. camera movement).
+   * non-interactive events (e.g: texture loaded)
+   * @param {*} changeSource
+   * @param {boolean} needsRedraw - indicates if notified change requires a full scene redraw.
+   */
+  notifyChange() {
+    let changeSource = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : undefined;
+    let needsRedraw = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    if (changeSource) {
+      this._changeSources.add(changeSource);
+      if (!this.mainLoop.gfxEngine.renderer.xr.isPresenting && (changeSource.isTileMesh || changeSource.isCamera)) {
+        this.#fullSizeDepthBuffer.needsUpdate = true;
+      }
+    }
+    this.mainLoop.scheduleViewUpdate(this, needsRedraw);
+  }
+
+  /**
+   * Get all layers, with an optionnal filter applied.
+   * The filter method will be called with 2 args:
+   *   - 1st: current layer
+   *   - 2nd: (optional) the geometry layer to which the current layer is attached
+   * @example
+   * // get all layers
+   * view.getLayers();
+   * // get all color layers
+   * view.getLayers(layer => layer.isColorLayer);
+   * // get all elevation layers
+   * view.getLayers(layer => layer.isElevationLayer);
+   * // get all geometry layers
+   * view.getLayers(layer => layer.isGeometryLayer);
+   * // get one layer with id
+   * view.getLayers(layer => layer.id === 'itt');
+   * @param {function(Layer):boolean} filter
+   * @returns {Array<Layer>}
+   */
+  getLayers(filter) {
+    const result = [];
+    for (const layer of this.#layers) {
+      if (!filter || filter(layer)) {
+        result.push(layer);
+      }
+      if (layer.attachedLayers) {
+        for (const attached of layer.attachedLayers) {
+          if (!filter || filter(attached, layer)) {
+            result.push(attached);
+          }
+        }
+      }
+    }
+    return result;
+  }
+
+  /**
+   * Gets the layer by identifier.
+   *
+   * @param {String}  layerId  The layer identifier
+   * @return {Layer}  The layer by identifier.
+   */
+
+  getLayerById(layerId) {
+    return this.getLayers(l => l.id === layerId)[0];
+  }
+
+  /**
+   * @name FrameRequester
+   * @function
+   *
+   * @description
+   * Method that will be called each time the `MainLoop` updates. This function
+   * will be given as parameter the delta (in ms) between this update and the
+   * previous one, and whether or not we just started to render again. This update
+   * is considered as the "next" update if `view.notifyChange` was called during a
+   * precedent update. If `view.notifyChange` has been called by something else
+   * (other micro/macrotask, UI events etc...), then this update is considered as
+   * being the "first". It can also receive optional arguments, depending on the
+   * attach point of this function. Currently only `BEFORE_LAYER_UPDATE /
+   * AFTER_LAYER_UPDATE` attach points provide an additional argument: the layer
+   * being updated.
+   * <br><br>
+   *
+   * This means that if a `frameRequester` function wants to animate something, it
+   * should keep on calling `view.notifyChange` until its task is done.
+   * <br><br>
+   *
+   * Implementors of `frameRequester` should keep in mind that this function will
+   * be potentially called at each frame, thus care should be given about
+   * performance.
+   * <br><br>
+   *
+   * Typical frameRequesters are controls, module wanting to animate moves or UI
+   * elements etc... Basically anything that would want to call
+   * requestAnimationFrame.
+   *
+   * @param {number} dt
+   * @param {boolean} updateLoopRestarted
+   * @param {...*} args
+   */
+  /**
+   * Add a frame requester to this view.
+   *
+   * FrameRequesters can activate the MainLoop update by calling view.notifyChange.
+   *
+   * @param {String} when - decide when the frameRequester should be called during
+   * the update cycle. Can be any of {@link MAIN_LOOP_EVENTS}.
+   * @param {FrameRequester} frameRequester - this function will be called at each
+   * MainLoop update with the time delta between last update, or 0 if the MainLoop
+   * has just been relaunched.
+   */
+  addFrameRequester(when, frameRequester) {
+    if (typeof frameRequester !== 'function') {
+      throw new Error('frameRequester must be a function');
+    }
+    if (!this._frameRequesters[when]) {
+      this._frameRequesters[when] = [frameRequester];
+    } else {
+      this._frameRequesters[when].push(frameRequester);
+    }
+  }
+
+  /**
+   * Remove a frameRequester.
+   * The effective removal will happen either later; at worst it'll be at
+   * the beginning of the next frame.
+   *
+   * @param {String} when - attach point of this requester. Can be any of
+   * {@link MAIN_LOOP_EVENTS}.
+   * @param {FrameRequester} frameRequester
+   */
+  removeFrameRequester(when, frameRequester) {
+    if (this._frameRequesters[when].includes(frameRequester)) {
+      this._delayedFrameRequesterRemoval.push({
+        when,
+        frameRequester
+      });
+    } else {
+      console.error('Invalid call to removeFrameRequester: frameRequester isn\'t registered');
+    }
+  }
+
+  /**
+   * Removes all frame requesters.
+   */
+  removeAllFrameRequesters() {
+    for (const when in this._frameRequesters) {
+      if (Object.prototype.hasOwnProperty.call(this._frameRequesters, when)) {
+        const frameRequesters = this._frameRequesters[when];
+        for (const frameRequester of frameRequesters) {
+          this.removeFrameRequester(when, frameRequester);
+        }
+      }
+    }
+    this._executeFrameRequestersRemovals();
+  }
+
+  /**
+   * Removes all viewer events.
+   */
+  removeAllEvents() {
+    if (this._listeners === undefined) {
+      return;
+    }
+    for (const type in this._listeners) {
+      if (Object.prototype.hasOwnProperty.call(this._listeners, type)) {
+        delete this._listeners[type];
+      }
+    }
+    this._listeners = undefined;
+  }
+  _executeFrameRequestersRemovals() {
+    for (const toDelete of this._delayedFrameRequesterRemoval) {
+      const index = this._frameRequesters[toDelete.when].indexOf(toDelete.frameRequester);
+      if (index >= 0) {
+        this._frameRequesters[toDelete.when].splice(index, 1);
+      } else {
+        console.warn('FrameReq has already been removed');
+      }
+    }
+    this._delayedFrameRequesterRemoval.length = 0;
+  }
+
+  /**
+   * Execute a frameRequester.
+   *
+   * @param {String} when - attach point of this (these) requester(s). Can be any
+   * of {@link MAIN_LOOP_EVENTS}.
+   * @param {Number} dt - delta between this update and the previous one
+   * @param {boolean} updateLoopRestarted
+   * @param {...*} args - optional arguments
+   */
+  execFrameRequesters(when, dt, updateLoopRestarted) {
+    if (!this._frameRequesters[when]) {
+      return;
+    }
+    if (this._delayedFrameRequesterRemoval.length > 0) {
+      this._executeFrameRequestersRemovals();
+    }
+    for (var _len = arguments.length, args = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
+      args[_key - 3] = arguments[_key];
+    }
+    for (const frameRequester of this._frameRequesters[when]) {
+      if (frameRequester.update) {
+        frameRequester.update(dt, updateLoopRestarted, args);
+      } else {
+        frameRequester(dt, updateLoopRestarted, args);
+      }
+    }
+  }
+
+  /**
+   * Extract view coordinates from a mouse-event / touch-event
+   * @param {event} event - event can be a MouseEvent or a TouchEvent
+   * @param {THREE.Vector2} target - the target to set the view coords in
+   * @param {number} [touchIdx=0] - finger index when using a TouchEvent
+   * @return {THREE.Vector2|undefined} - view coordinates (in pixels, 0-0 = top-left of the View).
+   * If the event is neither a `MouseEvent` nor a `TouchEvent`, the return is `undefined`.
+   */
+  eventToViewCoords(event) {
+    let target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _eventCoords;
+    let touchIdx = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    const br = this.domElement.getBoundingClientRect();
+    if (event.touches && event.touches.length) {
+      return target.set(event.touches[touchIdx].clientX - br.x, event.touches[touchIdx].clientY - br.y);
+    } else if (event.offsetX !== undefined && event.offsetY !== undefined) {
+      const targetBoundingRect = event.target.getBoundingClientRect();
+      return target.set(targetBoundingRect.x + event.offsetX - br.x, targetBoundingRect.y + event.offsetY - br.y);
+    }
+  }
+
+  /**
+   * Extract normalized coordinates (NDC) from a mouse-event / touch-event
+   * @param {event} event - event can be a MouseEvent or a TouchEvent
+   * @param {number} touchIdx - finger index when using a TouchEvent (default: 0)
+   * @return {THREE.Vector2} - NDC coordinates (x and y are [-1, 1])
+   */
+  eventToNormalizedCoords(event) {
+    let touchIdx = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    return this.viewToNormalizedCoords(this.eventToViewCoords(event, _eventCoords, touchIdx));
+  }
+
+  /**
+   * Convert view coordinates to normalized coordinates (NDC)
+   * @param {THREE.Vector2} viewCoords (in pixels, 0-0 = top-left of the View)
+   * @param {THREE.Vector2} target
+   * @return {THREE.Vector2} - NDC coordinates (x and y are [-1, 1])
+   */
+  viewToNormalizedCoords(viewCoords) {
+    let target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _eventCoords;
+    target.x = 2 * (viewCoords.x / this.camera.width) - 1;
+    target.y = -2 * (viewCoords.y / this.camera.height) + 1;
+    return target;
+  }
+
+  /**
+   * Convert NDC coordinates to view coordinates
+   * @param {THREE.Vector2} ndcCoords
+   * @return {THREE.Vector2} - view coordinates (in pixels, 0-0 = top-left of the View)
+   */
+  normalizedToViewCoords(ndcCoords) {
+    _eventCoords.x = (ndcCoords.x + 1) * 0.5 * this.camera.width;
+    _eventCoords.y = (ndcCoords.y - 1) * -0.5 * this.camera.height;
+    return _eventCoords;
+  }
+
+  /**
+   * Searches for objects in {@link GeometryLayer} and specified
+   * `THREE.Object3D`, under the mouse or at a specified coordinates, in this
+   * view.
+   *
+   * @param {Object} mouseOrEvt - Mouse position in window coordinates (from
+   * the top left corner of the window) or `MouseEvent` or `TouchEvent`.
+   * @param {number} [radius=0] - The picking will happen in a circle centered
+   * on mouseOrEvt. This is the radius of this circle, in pixels.
+   * @param {GeometryLayer|string|Object3D|Array<GeometryLayer|string|Object3D>} [where] - Where to look for
+   * objects. It can be a single {@link GeometryLayer}, `THREE.Object3D`, ID of a layer or an array of one of these or
+   * of a mix of these. If no location is specified, it will query on all {@link GeometryLayer} present in this `View`.
+   *
+   * @return {Object[]} - An array of objects. Each element contains at least
+   * an object property which is the `THREE.Object3D` under the cursor. Then
+   * depending on the queried layer/source, there may be additionnal
+   * properties (coming from `THREE.Raycaster` for instance).
+   *
+   * @example
+   * view.pickObjectsAt({ x, y })
+   * view.pickObjectsAt({ x, y }, 1, 'wfsBuilding')
+   * view.pickObjectsAt({ x, y }, 3, 'wfsBuilding', myLayer)
+   */
+  pickObjectsAt(mouseOrEvt) {
+    let radius = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    let where = arguments.length > 2 ? arguments[2] : undefined;
+    const sources = [];
+    if (!where || where.length === 0) {
+      where = this.getLayers(l => l.isGeometryLayer);
+    }
+    if (!Array.isArray(where)) {
+      where = [where];
+    }
+    where.forEach(l => {
+      if (typeof l === 'string') {
+        l = this.getLayerById(l);
+      }
+      if (l && (l.isGeometryLayer || l.isObject3D)) {
+        sources.push(l);
+      }
+    });
+    if (sources.length == 0) {
+      return [];
+    }
+    const results = [];
+    const mouse = mouseOrEvt instanceof Event ? this.eventToViewCoords(mouseOrEvt) : mouseOrEvt;
+    for (const source of sources) {
+      if (source.isAtmosphere) {
+        continue;
+      }
+      if (source.isGeometryLayer) {
+        if (!source.ready) {
+          console.warn('view.pickObjectAt : layer is not ready : ', source);
+          continue;
+        }
+        source.pickObjectsAt(this, mouse, radius, results);
+      } else {
+        Picking.pickObjectsAt(this, mouse, radius, source, results);
+      }
+    }
+    return results;
+  }
+
+  /**
+   * Return the current zoom scale at the central point of the view. This
+   * function compute the scale of a map.
+   *
+   * @param {number} pitch - Screen pitch, in millimeters ; 0.28 by default
+   *
+   * @return {number} The zoom scale.
+   */
+  getScale() {
+    let pitch = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0.28;
+    if (this.camera3D.isOrthographicCamera) {
+      return pitch * 1E-3 / this.getPixelsToMeters();
+    }
+    return this.getScaleFromDistance(pitch, this.getDistanceFromCamera());
+  }
+  getScaleFromDistance() {
+    let pitch = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0.28;
+    let distance = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+    pitch /= 1000;
+    const fov = THREE.MathUtils.degToRad(this.camera3D.fov);
+    const unit = this.camera.height / (2 * distance * Math.tan(fov * 0.5));
+    return pitch * unit;
+  }
+
+  /**
+   * Given a screen coordinates, get the distance between the projected
+   * coordinates and the camera associated to this view.
+   *
+   * @param {THREE.Vector2} [screenCoord] - The screen coordinate to get the
+   * distance at. By default this is the middle of the screen.
+   *
+   * @return {number} The distance in meters.
+   */
+  getDistanceFromCamera(screenCoord) {
+    this.getPickingPositionFromDepth(screenCoord, positionVector);
+    return this.camera3D.position.distanceTo(positionVector);
+  }
+
+  /**
+   * Get, for a specific screen coordinate, the projected distance on the
+   * surface of the main layer of the view.
+   *
+   * @param {number} [pixels=1] - The size, in pixels, to get in meters.
+   * @param {THREE.Vector2} [screenCoord] - The screen coordinate to get the
+   * projected distance at. By default, this is the middle of the screen.
+   *
+   * @return {number} The projected distance in meters.
+   */
+  getPixelsToMeters() {
+    let pixels = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+    let screenCoord = arguments.length > 1 ? arguments[1] : undefined;
+    if (this.camera3D.isOrthographicCamera) {
+      screenMeters = (this.camera3D.right - this.camera3D.left) / this.camera3D.zoom;
+      return pixels * screenMeters / this.camera.width;
+    }
+    return this.getPixelsToMetersFromDistance(pixels, this.getDistanceFromCamera(screenCoord));
+  }
+  getPixelsToMetersFromDistance() {
+    let pixels = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+    let distance = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+    return pixels * distance / this.camera._preSSE;
+  }
+
+  /**
+   * Get, for a specific screen coordinate, the size in pixels of a projected
+   * distance on the surface of the main layer of the view.
+   *
+   * @param {number} [meters=1] - The size, in meters, to get in pixels.
+   * @param {THREE.Vector2} [screenCoord] - The screen coordinate to get the
+   * projected distance at. By default, this is the middle of the screen.
+   *
+   * @return {number} The projected distance in pixels.
+   */
+  getMetersToPixels() {
+    let meters = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+    let screenCoord = arguments.length > 1 ? arguments[1] : undefined;
+    if (this.camera3D.isOrthographicCamera) {
+      screenMeters = (this.camera3D.right - this.camera3D.left) / this.camera3D.zoom;
+      return meters * this.camera.width / screenMeters;
+    }
+    return this.getMetersToPixelsFromDistance(meters, this.getDistanceFromCamera(screenCoord));
+  }
+  getMetersToPixelsFromDistance() {
+    let meters = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+    let distance = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+    return this.camera._preSSE * meters / distance;
+  }
+
+  /**
+   * Searches for {@link FeatureGeometry} in {@link ColorLayer}, under the mouse or at
+   * the specified coordinates, in this view. Combining them per layer and in a Feature
+   * like format.
+   *
+   * @param {Object} mouseOrEvt - Mouse position in window coordinates (from
+   * the top left corner of the window) or `MouseEvent` or `TouchEvent`.
+   * @param {number} [radius=3] - The picking will happen in a circle centered
+   * on mouseOrEvt. This is the radius of this circle, in pixels.
+   * @param {...ColorLayer|GeometryLayer|string} [where] - The layers to look
+   * into. If not specified, all {@link ColorLayer} and {@link GeometryLayer}
+   * layers of this view will be looked in.
+   *
+   * @return {Object} - An object, having one property per layer.
+   * For example, looking for features on layers `wfsBuilding` and `wfsRoads`
+   * will give an object like `{ wfsBuilding: [...], wfsRoads: [] }`.
+   * Each property is made of an array, that can be empty or filled with
+   * Feature like objects composed of:
+   * - the FeatureGeometry
+   * - the feature type
+   * - the style
+   * - the coordinate if the FeatureGeometry is a point
+   *
+   * @example
+   * view.pickFeaturesAt({ x, y });
+   * view.pickFeaturesAt({ x, y }, 1, 'wfsBuilding');
+   * view.pickFeaturesAt({ x, y }, 3, 'wfsBuilding', myLayer);
+   */
+  pickFeaturesAt(mouseOrEvt) {
+    let radius = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3;
+    for (var _len2 = arguments.length, where = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
+      where[_key2 - 2] = arguments[_key2];
+    }
+    if (Array.isArray(where[0])) {
+      console.warn('Deprecated: the ...where argument of View#pickFeaturesAt should not be an array anymore, but a list: use the spread operator if needed.');
+      where = where[0];
+    }
+    const layers = [];
+    const result = {};
+    where = where.length == 0 ? this.getLayers(l => l.isColorLayer || l.isGeometryLayer) : where;
+    where.forEach(l => {
+      if (typeof l === 'string') {
+        l = this.getLayerById(l);
+      }
+      if (l && l.isLayer) {
+        result[l.id] = [];
+        if (l.isColorLayer) {
+          layers.push(l.id);
+        }
+      }
+    });
+
+    // Get the mouse coordinates to the correct system
+    const mouse = mouseOrEvt instanceof Event ? this.eventToViewCoords(mouseOrEvt, _eventCoords) : mouseOrEvt;
+    const objects = this.pickObjectsAt(mouse, radius, ...where);
+    if (objects.length > 0) {
+      objects.forEach(o => result[o.layer.id].push(o));
+    }
+    if (layers.length == 0) {
+      return result;
+    }
+    this.getPickingPositionFromDepth(mouse, positionVector);
+    coordinates.crs = this.referenceCrs;
+    coordinates.setFromVector3(positionVector);
+
+    // Get the correct precision; the position variable will be set in this
+    // function.
+    let precision;
+    const precisions = {
+      M: this.getPixelsToMeters(radius, mouse),
+      D: 0.001 * radius
+    };
+    if (this.isPlanarView) {
+      precisions.D = precisions.M;
+    } else if (this.getPixelsToDegrees) {
+      precisions.D = this.getMetersToDegrees(precisions.M);
+    }
+
+    // Get the tile corresponding to where the cursor is
+    const tiles = Picking.pickTilesAt(this, mouse, radius, this.tileLayer);
+    for (const tile of tiles) {
+      if (!tile.object.material) {
+        continue;
+      }
+      for (const materialLayer of tile.object.material.getLayers(layers)) {
+        for (const texture of materialLayer.textures) {
+          if (!texture.features) {
+            continue;
+          }
+          precision = CRS.isMetricUnit(texture.features.crs) ? precisions.M : precisions.D;
+          const featuresUnderCoor = FeaturesUtils.filterFeaturesUnderCoordinate(coordinates, texture.features, precision);
+          featuresUnderCoor.forEach(feature => {
+            if (!result[materialLayer.id].find(f => f.geometry === feature.geometry)) {
+              result[materialLayer.id].push(feature);
+            }
+          });
+        }
+      }
+    }
+    return result;
+  }
+  readDepthBuffer(x, y, width, height, buffer) {
+    const g = this.mainLoop.gfxEngine;
+    const currentWireframe = this.tileLayer.wireframe;
+    const currentOpacity = this.tileLayer.opacity;
+    const currentVisibility = this.tileLayer.visible;
+    if (currentWireframe) {
+      this.tileLayer.wireframe = false;
+    }
+    if (currentOpacity < 1.0) {
+      this.tileLayer.opacity = 1.0;
+    }
+    if (!currentVisibility) {
+      this.tileLayer.visible = true;
+    }
+    const restore = this.tileLayer.level0Nodes.map(n => RenderMode.push(n, RenderMode.MODES.DEPTH));
+    buffer = g.renderViewToBuffer({
+      camera: this.camera,
+      scene: this.tileLayer.object3d
+    }, {
+      x,
+      y,
+      width,
+      height,
+      buffer
+    });
+    restore.forEach(r => r());
+    if (this.tileLayer.wireframe !== currentWireframe) {
+      this.tileLayer.wireframe = currentWireframe;
+    }
+    if (this.tileLayer.opacity !== currentOpacity) {
+      this.tileLayer.opacity = currentOpacity;
+    }
+    if (this.tileLayer.visible !== currentVisibility) {
+      this.tileLayer.visible = currentVisibility;
+    }
+    return buffer;
+  }
+
+  /**
+   * Returns the world position on the terrain (view's crs: referenceCrs) under view coordinates.
+   * This position is computed with depth buffer.
+   *
+   * @param      {THREE.Vector2}  mouse  position in view coordinates (in pixel), if it's null so it's view's center.
+   * @param      {THREE.Vector3}  [target=THREE.Vector3()] target. the result will be copied into this Vector3. If not present a new one will be created.
+   * @return     {THREE.Vector3}  the world position on the terrain in view's crs: referenceCrs.
+   */
+
+  getPickingPositionFromDepth(mouse) {
+    let target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : new THREE.Vector3();
+    if (!this.tileLayer || this.tileLayer.level0Nodes.length == 0 || !this.tileLayer.level0Nodes[0]) {
+      target = undefined;
+      return;
+    }
+    const l = this.mainLoop;
+    const viewPaused = l.scheduler.commandsWaitingExecutionCount() == 0 && l.renderingState == RENDERING_PAUSED;
+    const g = l.gfxEngine;
+    const dim = g.getWindowSize();
+    mouse = mouse || dim.clone().multiplyScalar(0.5);
+    mouse.x = Math.floor(mouse.x);
+    mouse.y = Math.floor(mouse.y);
+
+    // Render/Read to buffer
+    let buffer;
+    if (viewPaused) {
+      if (this.#fullSizeDepthBuffer.needsUpdate) {
+        this.readDepthBuffer(0, 0, dim.x, dim.y, this.#fullSizeDepthBuffer);
+        this.#fullSizeDepthBuffer.needsUpdate = false;
+      }
+      const id = ((dim.y - mouse.y - 1) * dim.x + mouse.x) * 4;
+      buffer = this.#fullSizeDepthBuffer.slice(id, id + 4);
+    } else {
+      buffer = this.readDepthBuffer(mouse.x, mouse.y, 1, 1, this.#pixelDepthBuffer);
+    }
+    screen.x = mouse.x / dim.x * 2 - 1;
+    screen.y = -(mouse.y / dim.y) * 2 + 1;
+    if (Capabilities.isLogDepthBufferSupported() && this.camera3D.type == 'PerspectiveCamera') {
+      // TODO: solve this part with gl_FragCoord_Z and unproject
+      // Origin
+      ray.origin.copy(this.camera3D.position);
+
+      // Direction
+      ray.direction.set(screen.x, screen.y, 0.5);
+      // Unproject
+      matrix.multiplyMatrices(this.camera3D.matrixWorld, matrix.copy(this.camera3D.projectionMatrix).invert());
+      ray.direction.applyMatrix4(matrix);
+      ray.direction.sub(ray.origin);
+      direction.set(0, 0, 1.0);
+      direction.applyMatrix4(matrix);
+      direction.sub(ray.origin);
+      const angle = direction.angleTo(ray.direction);
+      const orthoZ = g.depthBufferRGBAValueToOrthoZ(buffer, this.camera3D);
+      const length = orthoZ / Math.cos(angle);
+      target.addVectors(this.camera3D.position, ray.direction.setLength(length));
+    } else {
+      const gl_FragCoord_Z = g.depthBufferRGBAValueToOrthoZ(buffer, this.camera3D);
+      target.set(screen.x, screen.y, gl_FragCoord_Z);
+      target.unproject(this.camera3D);
+    }
+    if (target.length() > 10000000) {
+      return undefined;
+    }
+    return target;
+  }
+
+  /**
+   * Returns the world {@link Coordinates} of the terrain at given view coordinates.
+   *
+   * @param {THREE.Vector2|event} [mouse] The view coordinates at which the world coordinates must be returned. This
+   * parameter can also be set to a mouse event from which the view coordinates will be deducted. If not specified,
+   * it will be defaulted to the view's center coordinates.
+   * @param {Coordinates} [target] The result will be copied into this {@link Coordinates} in the coordinate reference
+   * system of the given coordinate. If not specified, a new {@link Coordinates} instance will be created (in the
+   * view referenceCrs).
+   *
+   * @returns {Coordinates}   The world {@link Coordinates} of the terrain at the given view coordinates in the
+   * coordinate reference system of the target or in the view referenceCrs if no target is specified.
+   */
+  pickTerrainCoordinates(mouse) {
+    let target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : new Coordinates(this.referenceCrs);
+    if (mouse instanceof Event) {
+      this.eventToViewCoords(mouse);
+    } else if (mouse && mouse.x !== undefined && mouse.y !== undefined) {
+      _eventCoords.copy(mouse);
+    } else {
+      _eventCoords.set(this.mainLoop.gfxEngine.width / 2, this.mainLoop.gfxEngine.height / 2);
+    }
+    this.getPickingPositionFromDepth(_eventCoords, positionVector);
+    coordinates.crs = this.referenceCrs;
+    coordinates.setFromVector3(positionVector);
+    coordinates.as(target.crs, target);
+    return target;
+  }
+
+  /**
+   * Returns the world {@link Coordinates} of the terrain at given view coordinates.
+   *
+   * @param   {THREE.Vector2|event}   [mouse]     The view coordinates at which the world coordinates must be
+                                                  * returned. This parameter can also be set to a mouse event from
+                                                  * which the view coordinates will be deducted. If not specified, it
+                                                  * will be defaulted to the view's center coordinates.
+   * @param   {Coordinates}           [target]    The result will be copied into this {@link Coordinates}. If not
+                                                  * specified, a new {@link Coordinates} instance will be created.
+   *
+   * @returns {Coordinates}   The world {@link Coordinates} of the terrain at the given view coordinates.
+   *
+   * @deprecated Use View#pickTerrainCoordinates instead.
+   */
+  pickCoordinates(mouse) {
+    let target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : new Coordinates(this.referenceCrs);
+    console.warn('Deprecated, use View#pickTerrainCoordinates instead.');
+    return this.pickTerrainCoordinates(mouse, target);
+  }
+
+  /**
+   * Resize the viewer.
+   *
+   * @param {number} [width=viewerDiv.clientWidth] - The width to resize the
+   * viewer with. By default it is the `clientWidth` of the `viewerDiv`.
+   * @param {number} [height=viewerDiv.clientHeight] - The height to resize
+   * the viewer with. By default it is the `clientHeight` of the `viewerDiv`.
+   */
+  resize(width, height) {
+    if (width < 0 || height < 0) {
+      console.warn(`Trying to resize the View with negative height (${height}) or width (${width}). Skipping resize.`);
+      return;
+    }
+    if (width == undefined) {
+      width = this.domElement.clientWidth;
+    }
+    if (height == undefined) {
+      height = this.domElement.clientHeight;
+    }
+    this.#fullSizeDepthBuffer = new Uint8Array(4 * width * height);
+    this.mainLoop.gfxEngine.onWindowResize(width, height);
+    if (width !== 0 && height !== 0) {
+      this.camera.resize(width, height);
+      this.notifyChange(this.camera3D);
+    }
+  }
+}
+export default View;