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

package/lib/Core/Prefab/GlobeView.js

@@ -0,0 +1,155 @@
+import * as THREE from 'three';
+import View, { VIEW_EVENTS } from "../View.js";
+import GlobeControls from "../../Controls/GlobeControls.js";
+import { Coordinates, ellipsoidSizes } from '@itowns/geographic';
+import GlobeLayer from "./Globe/GlobeLayer.js";
+import Atmosphere from "./Globe/Atmosphere.js";
+import CameraUtils from "../../Utils/CameraUtils.js";
+
+/**
+ * Fires when the view is completely loaded. Controls and view's functions can be called then.
+ * @event GlobeView#initialized
+ * @property target {view} dispatched on view
+ * @property type {string} initialized
+ */
+/**
+ * Fires when a layer is added
+ * @event GlobeView#layer-added
+ * @property layerId {string} the id of the layer
+ * @property target {view} dispatched on view
+ * @property type {string} layers-added
+ */
+/**
+ * Fires when a layer is removed
+ * @event GlobeView#layer-removed
+ * @property layerId {string} the id of the layer
+ * @property target {view} dispatched on view
+ * @property type {string} layers-added
+ */
+/**
+ * Fires when the layers oder has changed
+ * @event GlobeView#layers-order-changed
+ * @property new {object}
+ * @property new.sequence {array}
+ * @property new.sequence.0 {number} the new layer at position 0
+ * @property new.sequence.1 {number} the new layer at position 1
+ * @property new.sequence.2 {number} the new layer at position 2
+ * @property previous {object}
+ * @property previous.sequence {array}
+ * @property previous.sequence.0 {number} the previous layer at position 0
+ * @property previous.sequence.1 {number} the previous layer at position 1
+ * @property previous.sequence.2 {number} the previous layer at position 2
+ * @property target {view} dispatched on view
+ * @property type {string} layers-order-changed
+ */
+
+/**
+ * Globe's EVENT
+ * @property GLOBE_INITIALIZED {string} Deprecated: emit one time when globe is initialized (use VIEW_EVENTS.INITIALIZED instead).
+ * @property LAYER_ADDED {string} Deprecated: emit when layer id added in viewer (use VIEW_EVENTS.LAYER_ADDED instead).
+ * @property LAYER_REMOVED {string} Deprecated: emit when layer id removed in viewer (use VIEW_EVENTS.LAYER_REMOVED instead).
+ * @property COLOR_LAYERS_ORDER_CHANGED {string} Deprecated: emit when  color layers order change (use VIEW_EVENTS.COLOR_LAYERS_ORDER_CHANGED instead).
+ */
+
+export const GLOBE_VIEW_EVENTS = {
+  GLOBE_INITIALIZED: VIEW_EVENTS.INITIALIZED,
+  LAYER_ADDED: VIEW_EVENTS.LAYER_ADDED,
+  LAYER_REMOVED: VIEW_EVENTS.LAYER_REMOVED,
+  COLOR_LAYERS_ORDER_CHANGED: VIEW_EVENTS.COLOR_LAYERS_ORDER_CHANGED
+};
+class GlobeView extends View {
+  /**
+   * Creates a view of a globe.
+   *
+   * @extends View
+   *
+   * @example <caption><b>Instance GlobeView.</b></caption>
+   * var viewerDiv = document.getElementById('viewerDiv');
+   * const placement = {
+   *     coord: new itowns.Coordinates('EPSG:4326', 2.351323, 48.856712),
+   *     range: 25000000,
+   * }
+   * var view = new itowns.GlobeView(viewerDiv, placement);
+   *
+   * @param {HTMLDivElement} viewerDiv - Where to attach the view and display it
+   * in the DOM.
+   * @param {CameraTransformOptions|Extent} placement - An object to place view
+   * @param {object} [options] - See options of {@link View}.
+   * @param {Object} [options.controls] - See options of {@link GlobeControls}
+   */
+  constructor(viewerDiv) {
+    let placement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    THREE.Object3D.DEFAULT_UP.set(0, 0, 1);
+    // Setup View
+    super('EPSG:4978', viewerDiv, options);
+    this.isGlobeView = true;
+    this.camera3D.near = Math.max(15.0, 0.000002352 * ellipsoidSizes.x);
+    this.camera3D.far = ellipsoidSizes.x * 10;
+    const tileLayer = new GlobeLayer('globe', options.object3d, options);
+    this.mainLoop.gfxEngine.label2dRenderer.infoTileLayer = tileLayer.info;
+    this.addLayer(tileLayer);
+    this.tileLayer = tileLayer;
+    if (!placement.isExtent) {
+      placement.coord = placement.coord || new Coordinates('EPSG:4326', 0, 0);
+      placement.tilt = placement.tilt || 89.5;
+      placement.heading = placement.heading || 0;
+      placement.range = placement.range || ellipsoidSizes.x * 2.0;
+    }
+    if (options.noControls) {
+      CameraUtils.transformCameraToLookAtTarget(this, this.camera3D, placement);
+    } else {
+      this.controls = new GlobeControls(this, placement, options.controls);
+      this.controls.handleCollision = typeof options.handleCollision !== 'undefined' ? options.handleCollision : true;
+    }
+    this.addLayer(new Atmosphere('atmosphere', options.atmosphere));
+
+    // GlobeView needs this.camera.resize to set perpsective matrix camera
+    this.camera.resize(viewerDiv.clientWidth, viewerDiv.clientHeight);
+  }
+
+  /**
+   * 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.
+   *
+   * The layer added is attached, by default to `GlobeLayer` (`GlobeView.tileLayer`).
+   * If you want add a unattached layer use `View#addLayer` parent method.
+   *
+   * @param {LayerOptions|Layer|GeometryLayer} layer The layer to add in view.
+   * @return {Promise} a promise resolved with the new layer object when it is fully initialized or rejected if any error occurred.
+   */
+  addLayer(layer) {
+    if (!layer || !layer.isLayer) {
+      return Promise.reject(new Error('Add Layer type object'));
+    }
+    if (layer.isColorLayer) {
+      if (!this.tileLayer.tileMatrixSets.includes(layer.source.crs)) {
+        return layer._reject(`Only ${this.tileLayer.tileMatrixSets} tileMatrixSet are currently supported for color layers`);
+      }
+    } else if (layer.isElevationLayer) {
+      if (layer.source.crs !== this.tileLayer.tileMatrixSets[0]) {
+        return layer._reject(`Only ${this.tileLayer.tileMatrixSets[0]} tileMatrixSet is currently supported for elevation layers`);
+      }
+    }
+    return super.addLayer(layer, this.tileLayer);
+  }
+  getPixelsToDegrees() {
+    let pixels = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+    let screenCoord = arguments.length > 1 ? arguments[1] : undefined;
+    return this.getMetersToDegrees(this.getPixelsToMeters(pixels, screenCoord));
+  }
+  getPixelsToDegreesFromDistance() {
+    let pixels = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+    let distance = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+    return this.getMetersToDegrees(this.getPixelsToMetersFromDistance(pixels, distance));
+  }
+  getMetersToDegrees() {
+    let meters = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+    return THREE.MathUtils.radToDeg(2 * Math.asin(meters / (2 * ellipsoidSizes.x)));
+  }
+}
+export default GlobeView;

package/lib/Core/Prefab/Planar/PlanarLayer.js

@@ -0,0 +1,59 @@
+import * as THREE from 'three';
+import TiledGeometryLayer from "../../../Layer/TiledGeometryLayer.js";
+import { globalExtentTMS } from "../../Tile/TileGrid.js";
+import { PlanarTileBuilder } from "./PlanarTileBuilder.js";
+
+/**
+ * @property {boolean} isPlanarLayer - Used to checkout whether this layer is a
+ * PlanarLayer. Default is true. You should not change this, as it is used
+ * internally for optimisation.
+ * @extends TiledGeometryLayer
+ */
+class PlanarLayer extends TiledGeometryLayer {
+  /**
+   * A {@link TiledGeometryLayer} to use with a {@link PlanarView}. It has
+   * specific method for updating and subdivising its grid.
+   *
+   * @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.
+   * @param {Extent} extent - The extent to define the layer within.
+   * @param {THREE.Object3d} [object3d=THREE.Group] - The object3d used to
+   * contain the geometry of the TiledGeometryLayer. It is usually a
+   * `THREE.Group`, but it can be anything inheriting from a `THREE.Object3d`.
+   * @param {Object} [config] - Optional configuration, all elements in it
+   * will be merged as is in the layer. For example, if the configuration
+   * contains three elements `name, protocol, extent`, these elements will be
+   * available using `layer.name` or something else depending on the property
+   * name.
+   * @param {number} [config.maxSubdivisionLevel=5] - Maximum subdivision
+   * level for this tiled layer.
+   *
+   * @throws {Error} `object3d` must be a valid `THREE.Object3d`.
+   */
+  constructor(id, extent, object3d) {
+    let config = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+    const {
+      minSubdivisionLevel = 0,
+      maxSubdivisionLevel = 5,
+      ...tiledConfig
+    } = config;
+    const tileMatrixSets = [extent.crs];
+    if (!globalExtentTMS.get(extent.crs)) {
+      // Add new global extent for this new crs projection.
+      globalExtentTMS.set(extent.crs, extent);
+    }
+    const builder = new PlanarTileBuilder({
+      crs: extent.crs
+    });
+    super(id, object3d || new THREE.Group(), [extent], builder, {
+      tileMatrixSets,
+      ...tiledConfig
+    });
+    this.isPlanarLayer = true;
+    this.extent = extent;
+    this.minSubdivisionLevel = minSubdivisionLevel;
+    this.maxSubdivisionLevel = maxSubdivisionLevel;
+  }
+}
+export default PlanarLayer;

package/lib/Core/Prefab/Planar/PlanarTileBuilder.js

@@ -0,0 +1,71 @@
+import * as THREE from 'three';
+import { Coordinates, Extent } from '@itowns/geographic';
+const quaternion = new THREE.Quaternion();
+const center = new THREE.Vector3();
+
+/** Specialized parameters for the [PlanarTileBuilder]. */
+
+/**
+ * TileBuilder implementation for the purpose of generating planar
+ * tile arrangements.
+ */
+export class PlanarTileBuilder {
+  constructor(options) {
+    if (options.projection) {
+      console.warn('PlanarTileBuilder projection parameter is deprecated,' + ' use crs instead.');
+      options.crs ??= options.projection;
+    }
+    this._crs = options.crs;
+    this._transform = {
+      coords: new Coordinates('EPSG:4326', 0, 0),
+      position: new THREE.Vector3(),
+      normal: new THREE.Vector3(0, 0, 1)
+    };
+    this._uvCount = options.uvCount ?? 1;
+  }
+  get uvCount() {
+    return this._uvCount;
+  }
+  get crs() {
+    return this._crs;
+  }
+  prepare(params) {
+    const newParams = params;
+    newParams.nbRow = 2 ** (params.level + 1.0);
+    newParams.coordinates = new Coordinates(this.crs);
+    return newParams;
+  }
+  center(extent) {
+    extent.center(this._transform.coords);
+    center.set(this._transform.coords.x, this._transform.coords.y, 0);
+    return center;
+  }
+  vertexPosition(coordinates) {
+    this._transform.position.set(coordinates.x, coordinates.y, 0);
+    return this._transform.position;
+  }
+  vertexNormal() {
+    return this._transform.normal;
+  }
+  uProject(u, extent) {
+    return extent.west + u * (extent.east - extent.west);
+  }
+  vProject(v, extent) {
+    return extent.south + v * (extent.north - extent.south);
+  }
+  computeShareableExtent(extent) {
+    // compute shareable extent to pool the geometries
+    // the geometry in common extent is identical to the existing input
+    // with a translation
+    return {
+      shareableExtent: new Extent(extent.crs).setFromExtent({
+        west: 0,
+        east: Math.abs(extent.west - extent.east),
+        south: 0,
+        north: Math.abs(extent.north - extent.south)
+      }),
+      quaternion,
+      position: this.center(extent).clone()
+    };
+  }
+}

package/lib/Core/Prefab/PlanarView.js

@@ -0,0 +1,62 @@
+import * as THREE from 'three';
+import View from "../View.js";
+import CameraUtils from "../../Utils/CameraUtils.js";
+import PlanarControls from "../../Controls/PlanarControls.js";
+import PlanarLayer from "./Planar/PlanarLayer.js";
+class PlanarView extends View {
+  /**
+   * @extends View
+   *
+   * @example <caption><b>Instance with placement on the ground.</b></caption>
+   * var viewerDiv = document.getElementById('viewerDiv');
+   * const extent = new Extent('EPSG:3946', 1837816.94334, 1847692.32501, 5170036.4587, 5178412.82698);
+   * var view = new itowns.PlanarView(viewerDiv, extent, { placement: { heading: -49.6, range: 6200, tilt: 17 } });
+   *
+   * @param {HTMLDivElement} viewerDiv - Where to attach the view and display it
+   * in the DOM.
+   * @param {Extent} extent - The ground extent.
+   * @param {Object} [options] - See options of {@link View}.
+   * @param {boolean} [options.noControls=false] - If true, no controls are associated to the view.
+   * @param {Object} [options.controls] - options for the {@link PlanarControls} associated to the view, if
+   * `options.noControls` is false.
+   * @param {CameraUtils~CameraTransformOptions|Extent} [options.placement] - The
+   * {@link CameraUtils~CameraTransformOptions} to apply to view's camera or the extent it must display at
+   * initialization. By default, camera will display the view's extent (given in `extent` parameter).
+   */
+  constructor(viewerDiv, extent) {
+    let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    THREE.Object3D.DEFAULT_UP.set(0, 0, 1);
+
+    // Setup View
+    super(extent.crs, viewerDiv, options);
+    this.isPlanarView = true;
+
+    // Configure camera
+    const dim = extent.planarDimensions();
+    const max = Math.max(dim.x, dim.y);
+    this.camera3D.near = 0.1;
+    this.camera3D.far = this.camera3D.isOrthographicCamera ? 2000 : 2 * max;
+    this.camera3D.updateProjectionMatrix();
+    const tileLayer = new PlanarLayer('planar', extent, options.object3d, options);
+    this.mainLoop.gfxEngine.label2dRenderer.infoTileLayer = tileLayer.info;
+    this.addLayer(tileLayer);
+
+    // Configure camera
+    const placement = options.placement || {};
+    if (!placement.isExtent) {
+      placement.coord = placement.coord || extent.center();
+      placement.tilt = placement.tilt || 90;
+      placement.heading = placement.heading || 0;
+      placement.range = placement.range || max;
+    }
+    CameraUtils.transformCameraToLookAtTarget(this, this.camera3D, placement);
+    if (!options.noControls) {
+      this.controls = new PlanarControls(this, options.controls);
+    }
+    this.tileLayer = tileLayer;
+  }
+  addLayer(layer) {
+    return super.addLayer(layer, this.tileLayer);
+  }
+}
+export default PlanarView;

package/lib/Core/Prefab/TileBuilder.js

@@ -0,0 +1,82 @@
+import * as THREE from 'three';
+import { TileGeometry } from "../TileGeometry.js";
+import { LRUCache } from 'lru-cache';
+import { computeBuffers } from "./computeBufferTileGeometry.js";
+import OBB from "../../Renderer/OBB.js";
+const cacheBuffer = new Map();
+const cacheTile = new LRUCache({
+  max: 500
+});
+
+/**
+ * Reference to a tile's extent with rigid transformations.
+ * Enables reuse of geometry, saving a bit of memory.
+ */
+
+export function newTileGeometry(builder, params) {
+  const {
+    shareableExtent,
+    quaternion,
+    position
+  } = builder.computeShareableExtent(params.extent);
+  const south = shareableExtent.south.toFixed(6);
+  const bufferKey = `${builder.crs}_${params.disableSkirt ? 0 : 1}_${params.segments}`;
+  const key = `s${south}l${params.level}bK${bufferKey}`;
+  let promiseGeometry = cacheTile.get(key);
+
+  // build geometry if doesn't exist
+  if (!promiseGeometry) {
+    let resolve;
+    promiseGeometry = new Promise(r => {
+      resolve = r;
+    });
+    cacheTile.set(key, promiseGeometry);
+    params.extent = shareableExtent;
+    params.center = builder.center(params.extent).clone();
+    // Read previously cached values (index and uv.wgs84 only
+    // depend on the # of triangles)
+    let cachedBuffers = cacheBuffer.get(bufferKey);
+    let buffers;
+    try {
+      buffers = computeBuffers(builder, params, cachedBuffers !== undefined ? {
+        index: cachedBuffers.index.array,
+        uv: cachedBuffers.uv.array
+      } : undefined);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+    if (!cachedBuffers) {
+      // We know the fields will exist due to the condition
+      // matching with the one for buildIndexAndUv_0.
+      // TODO: Make this brain-based check compiler-based.
+
+      cachedBuffers = {
+        index: new THREE.BufferAttribute(buffers.index, 1),
+        uv: new THREE.BufferAttribute(buffers.uvs[0], 2)
+      };
+
+      // Update cacheBuffer
+      cacheBuffer.set(bufferKey, cachedBuffers);
+    }
+    const gpuBuffers = {
+      index: cachedBuffers.index,
+      uvs: [cachedBuffers.uv, ...(buffers.uvs[1] !== undefined ? [new THREE.BufferAttribute(buffers.uvs[1], 1)] : [])],
+      position: new THREE.BufferAttribute(buffers.position, 3),
+      normal: new THREE.BufferAttribute(buffers.normal, 3)
+    };
+    const geometry = new TileGeometry(builder, params, gpuBuffers);
+    geometry.OBB = new OBB(geometry.boundingBox.min, geometry.boundingBox.max);
+    geometry.initRefCount(cacheTile, key);
+    resolve(geometry);
+    return Promise.resolve({
+      geometry,
+      quaternion,
+      position
+    });
+  }
+  return promiseGeometry.then(geometry => ({
+    geometry,
+    quaternion,
+    position
+  }));
+}

package/lib/Core/Prefab/computeBufferTileGeometry.js

@@ -0,0 +1,248 @@
+import * as THREE from 'three';
+export function getBufferIndexSize(segments, noSkirt) {
+  const triangles = segments * segments * 2 + (noSkirt ? 0 : 4 * segments * 2);
+  return triangles * 3;
+}
+function getUintArrayConstructor(highestValue) {
+  let picked = null;
+  if (highestValue < 2 ** 8) {
+    picked = Uint8Array;
+  } else if (highestValue < 2 ** 16) {
+    picked = Uint16Array;
+  } else if (highestValue < 2 ** 32) {
+    picked = Uint32Array;
+  } else {
+    throw new Error('Value is too high');
+  }
+  return picked;
+}
+function allocateIndexBuffer(nVertex, nSeg, params, cache) {
+  const indexBufferSize = getBufferIndexSize(nSeg, params.disableSkirt);
+  const indexConstructor = getUintArrayConstructor(nVertex);
+  const tileLen = indexBufferSize;
+  const skirtLen = 4 * nSeg;
+  if (cache !== undefined) {
+    return {
+      index: cache,
+      skirt: cache.subarray(tileLen, tileLen + skirtLen)
+    };
+  }
+  const indexBuffer = new ArrayBuffer((
+  // Tile
+  tileLen
+  // Skirt
+  + (params.disableSkirt ? 0 : skirtLen)) * indexConstructor.BYTES_PER_ELEMENT);
+  const index = new indexConstructor(indexBuffer);
+  const skirt = !params.disableSkirt ? index.subarray(tileLen, tileLen + skirtLen) : undefined;
+  return {
+    index,
+    skirt
+  };
+}
+function allocateBuffers(nVertex, nSeg, builder, params, cache) {
+  const {
+    index,
+    skirt
+  } = allocateIndexBuffer(nVertex, nSeg, params, cache?.index);
+  return {
+    index,
+    skirt,
+    position: new Float32Array(nVertex * 3),
+    normal: new Float32Array(nVertex * 3),
+    // 2 UV set per tile: wgs84 (uv[0]) and pseudo-mercator (pm, uv[1])
+    //    - wgs84: 1 texture per tile because tiles are using wgs84
+    //          projection
+    //    - pm: use multiple textures per tile.
+    //      +-------------------------+
+    //      |                         |
+    //      |     Texture 0           |
+    //      +-------------------------+
+    //      |                         |
+    //      |     Texture 1           |
+    //      +-------------------------+
+    //      |                         |
+    //      |     Texture 2           |
+    //      +-------------------------+
+    //        * u = wgs84.u
+    //        * v = textureid + v in builder texture
+    uvs: [cache?.uv ?? new Float32Array(nVertex * 2), builder.computeExtraOffset !== undefined ? new Float32Array(nVertex) : undefined]
+  };
+}
+function computeUv0(uv, id, u, v) {
+  uv[id * 2 + 0] = u;
+  uv[id * 2 + 1] = v;
+}
+function initComputeUv1(value) {
+  return (uv, id) => {
+    uv[id] = value;
+  };
+}
+/** Compute buffers describing a tile according to a builder and its params. */
+// TODO: Split this even further into subfunctions
+export function computeBuffers(builder, params, cache) {
+  //     n seg, n+1 vert    + <- skirt, n verts per side
+  //    <---------------> / |
+  //    +---+---+---+---+   |
+  //    | / | / | / | / |   |  Vertices:
+  //    +---+---+---+---+ - +     tile = (n + 1)^2
+  //    | / | / | / | / |   |    skirt = 4n
+  //    +---+---+---+---+ - +
+  //    | / | / | / | / |   |  Segments:
+  //    +---+---+---+---+ - +     tile = 2 * n * (n + 1) + n^2
+  //    | / | / | / | / |   |    skirt = 2n * 4
+  //    +---+---+---+---+   |
+  const nSeg = Math.max(2, params.segments);
+  const nVertex = nSeg + 1;
+  const nTileVertex = nVertex ** 2;
+  const nSkirtVertex = params.disableSkirt ? 0 : 4 * nSeg;
+  const nTotalVertex = nTileVertex + nSkirtVertex;
+
+  // Computer should combust before this happens
+  if (nTotalVertex > 2 ** 32) {
+    throw new Error('Tile segments count is too big');
+  }
+  const outBuffers = allocateBuffers(nTotalVertex, nSeg, builder, params, cache);
+  const computeUvs = [cache === undefined ? computeUv0 : () => {}];
+  params = builder.prepare(params);
+  for (let y = 0; y <= nSeg; y++) {
+    const v = y / nSeg;
+    params.coordinates.y = builder.vProject(v, params.extent);
+    if (builder.computeExtraOffset !== undefined) {
+      computeUvs[1] = initComputeUv1(builder.computeExtraOffset(params));
+    }
+    for (let x = 0; x <= nSeg; x++) {
+      const u = x / nSeg;
+      const id_m3 = (y * nVertex + x) * 3;
+      params.coordinates.x = builder.uProject(u, params.extent);
+      const vertex = builder.vertexPosition(params.coordinates);
+      const normal = builder.vertexNormal();
+
+      // move geometry to center world
+      vertex.sub(params.center);
+
+      // align normal to z axis
+      // HACK: this check style is not great
+      if ('quatNormalToZ' in params) {
+        const quat = params.quatNormalToZ;
+        vertex.applyQuaternion(quat);
+        normal.applyQuaternion(quat);
+      }
+      vertex.toArray(outBuffers.position, id_m3);
+      normal.toArray(outBuffers.normal, id_m3);
+      for (const [index, computeUv] of computeUvs.entries()) {
+        if (computeUv !== undefined) {
+          computeUv(outBuffers.uvs[index], y * nVertex + x, u, v);
+        }
+      }
+    }
+  }
+
+  // Fill skirt index buffer
+  if (cache === undefined && !params.disableSkirt) {
+    for (let x = 0; x < nVertex; x++) {
+      //   -------->
+      //   0---1---2
+      //   | / | / |   [0-9] = assign order
+      //   +---+---+
+      //   | / | / |
+      //   +---+---+
+      outBuffers.skirt[x] = x;
+      //   +---+---+
+      //   | / | / |   [0-9] = assign order
+      //   +---+---x   x = skipped for now
+      //   | / | / |
+      //   0---1---2
+      //   <--------
+      outBuffers.skirt[2 * nVertex - 2 + x] = nVertex ** 2 - (x + 1);
+    }
+    for (let y = 1; y < nVertex - 1; y++) {
+      //   +---+---s |
+      //   | / | / | | o = stored vertices
+      //   +---+---o | s = already stored
+      //   | / | / | |
+      //   +---+---s v
+      outBuffers.skirt[nVertex - 1 + y] = y * nVertex + (nVertex - 1);
+      // ^ s---+---+
+      // | | / | / |   o = stored vertices
+      // | o---+---+   s = already stored
+      // | | / | / |
+      // | s---+---+
+      outBuffers.skirt[3 * nVertex - 3 + y] = nVertex * (nVertex - 1 - y);
+    }
+  }
+
+  /** Copy passed indices at the desired index of the output index buffer. */
+  function bufferizeTri(id, va, vb, vc) {
+    outBuffers.index[id + 0] = va;
+    outBuffers.index[id + 1] = vb;
+    outBuffers.index[id + 2] = vc;
+  }
+  if (cache === undefined) {
+    for (let y = 0; y < nSeg; y++) {
+      for (let x = 0; x < nSeg; x++) {
+        const v1 = y * nVertex + (x + 1);
+        const v2 = y * nVertex + x;
+        const v3 = (y + 1) * nVertex + x;
+        const v4 = (y + 1) * nVertex + (x + 1);
+        const id = (y * nSeg + x) * 6;
+        bufferizeTri(id, /**/v4, v2, v1);
+        bufferizeTri(id + 3, v4, v3, v2);
+      }
+    }
+  }
+
+  // PERF: Beware skirt's size influences performance
+  // INFO: The size of the skirt is now a ratio of the size of the tile.
+  // To be perfect it should depend on the real elevation delta but too heavy
+  // to compute
+  if (!params.disableSkirt) {
+    // We compute the actual size of tile segment to use later for
+    // the skirt.
+    const segmentSize = new THREE.Vector3().fromArray(outBuffers.position).distanceTo(new THREE.Vector3().fromArray(outBuffers.position, 3));
+    const buildSkirt = cache === undefined ? {
+      index: (id, v1, v2, v3, v4) => {
+        bufferizeTri(id, v1, v2, v3);
+        bufferizeTri(id + 3, v1, v3, v4);
+        return id + 6;
+      },
+      uv: (buf, idTo, idFrom) => {
+        buf[idTo * 2 + 0] = buf[idFrom * 2 + 0];
+        buf[idTo * 2 + 1] = buf[idFrom * 2 + 1];
+      }
+    } : {
+      index: () => {},
+      uv: () => {}
+    };
+
+    // Alias for readability
+    const start = nTileVertex;
+    for (let i = 0; i < outBuffers.skirt.length; i++) {
+      const id = outBuffers.skirt[i];
+      const id_m3 = (start + i) * 3;
+      const id2_m3 = id * 3;
+      outBuffers.position[id_m3 + 0] = outBuffers.position[id2_m3 + 0] - outBuffers.normal[id2_m3 + 0] * segmentSize;
+      outBuffers.position[id_m3 + 1] = outBuffers.position[id2_m3 + 1] - outBuffers.normal[id2_m3 + 1] * segmentSize;
+      outBuffers.position[id_m3 + 2] = outBuffers.position[id2_m3 + 2] - outBuffers.normal[id2_m3 + 2] * segmentSize;
+      outBuffers.normal[id_m3 + 0] = outBuffers.normal[id2_m3 + 0];
+      outBuffers.normal[id_m3 + 1] = outBuffers.normal[id2_m3 + 1];
+      outBuffers.normal[id_m3 + 2] = outBuffers.normal[id2_m3 + 2];
+      buildSkirt.uv(outBuffers.uvs[0], start + i, id);
+      if (outBuffers.uvs[1] !== undefined) {
+        outBuffers.uvs[1][start + i] = outBuffers.uvs[1][id];
+      }
+      const idf = (i + 1) % outBuffers.skirt.length;
+      const v2 = start + i;
+      const v3 = idf === 0 ? start : start + i + 1;
+      const v4 = outBuffers.skirt[idf];
+      buildSkirt.index(6 * nSeg ** 2 + i * 6, id, v2, v3, v4);
+    }
+  }
+
+  // Dropping skirt view
+  return {
+    index: outBuffers.index,
+    position: outBuffers.position,
+    uvs: outBuffers.uvs,
+    normal: outBuffers.normal
+  };
+}