itowns 2.44.3-next.22 → 2.44.3-next.24

package/examples/layers/JSONLayers/GeoidMNT.json

@@ -4,7 +4,9 @@
     "updateStrategy": {
         "type": 0
     },
-    "zmin": -12000,
+    "clampValues": {
+        "min": -12000
+    },
     "source": {
         "url": "https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/geoid/geoid/bil/%TILEMATRIX/geoid_%COL_%ROW.bil",
         "format": "image/x-bil;bits=32",

package/examples/source_file_geojson_3d.html

@@ -54,7 +54,6 @@
                     crs: 'EPSG:4326',
                     format: 'application/json',
                 }),
-                transparent: true,
                 opacity: 0.7,
                 zoom: { min: 10 },
                 style: {

package/examples/source_stream_wfs_raster.html

@@ -53,12 +53,6 @@
             itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);
             itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json').then(addElevationLayerFromConfig);
 
-            function isValidData(data) {
-                if(data.features[0].geometries.length < 1000) {
-                    return data;
-                }
-            }
-
             var wfsBuildingSource = new itowns.WFSSource({
                 url: 'https://data.geopf.fr/wfs/ows?',
                 version: '2.0.0',
@@ -102,7 +96,6 @@
                         width: 2.0,
                     },
                 },
-                isValidData: isValidData,
                 source: wfsBuildingSource,
                 zoom: { max: 20, min: 13 },
             });

package/lib/Converter/Feature2Texture.js

@@ -114,7 +114,9 @@ export default {
       coord.crs = extent.crs;
       c.width = sizeTexture;
       c.height = sizeTexture;
-      const ctx = c.getContext('2d');
+      const ctx = c.getContext('2d', {
+        willReadFrequently: true
+      });
       if (backgroundColor) {
         ctx.fillStyle = backgroundColor.getStyle();
         ctx.fillRect(0, 0, sizeTexture, sizeTexture);

package/lib/Converter/convertToTile.js

@@ -6,7 +6,7 @@
 import * as THREE from 'three';
 import TileMesh from "../Core/TileMesh.js";
 import LayeredMaterial from "../Renderer/LayeredMaterial.js";
-import newTileGeometry from "../Core/Prefab/TileBuilder.js";
+import { newTileGeometry } from "../Core/Prefab/TileBuilder.js";
 import ReferLayerProperties from "../Layer/ReferencingLayerProperties.js";
 import { geoidLayerIsVisible } from "../Layer/GeoidLayer.js";
 const dimensions = new THREE.Vector2();
@@ -42,14 +42,14 @@ export default {
     };
     return newTileGeometry(builder, paramsGeometry).then(result => {
       // build tile mesh
-      result.geometry._count++;
+      result.geometry.increaseRefCount();
       const crsCount = layer.tileMatrixSets.length;
       const material = new LayeredMaterial(layer.materialOptions, crsCount);
       ReferLayerProperties(material, layer);
       const tile = new TileMesh(result.geometry, material, layer, extent, level);
       if (parent && parent.isTileMesh) {
         // get parent extent transformation
-        const pTrans = builder.computeSharableExtent(parent.extent);
+        const pTrans = builder.computeShareableExtent(parent.extent);
         // place relative to his parent
         result.position.sub(pTrans.position).applyQuaternion(pTrans.quaternion.invert());
         result.quaternion.premultiply(pTrans.quaternion);

package/lib/Core/Prefab/Globe/Atmosphere.js

@@ -31,6 +31,10 @@ const colorSky = new THREE.Color();
 const spaceColor = new THREE.Color(0x030508);
 const limitAlti = 600000;
 const mfogDistance = ellipsoidSizes.x * 160.0;
+
+/**
+ * @extends GeometryLayer
+ */
 class Atmosphere extends GeometryLayer {
   /**
   * It's layer to simulate Globe atmosphere.
@@ -40,8 +44,6 @@ class Atmosphere extends GeometryLayer {
   * * [Atmosphere Shader From Space (Atmospheric scattering)](http://stainlessbeer.weebly.com/planets-9-atmospheric-scattering.html)
   * * [Accurate Atmospheric Scattering (NVIDIA GPU Gems 2)](https://developer.nvidia.com/gpugems/gpugems2/part-ii-shading-lighting-and-shadows/chapter-16-accurate-atmospheric-scattering).
   *
-  * @extends GeometryLayer
-  *
   * @param {string} id - The id of the layer Atmosphere.
   * @param {Object} [options] - options layer.
   * @param {number} [options.Kr] - `Kr` is the rayleigh scattering constant.

package/lib/Core/Prefab/Globe/GlobeLayer.js

@@ -2,7 +2,7 @@ import * as THREE from 'three';
 import TiledGeometryLayer from "../../../Layer/TiledGeometryLayer.js";
 import { ellipsoidSizes } from "../../Math/Ellipsoid.js";
 import { globalExtentTMS, schemeTiles } from "../../Tile/TileGrid.js";
-import BuilderEllipsoidTile from "./BuilderEllipsoidTile.js";
+import { GlobeTileBuilder } from "./GlobeTileBuilder.js";
 
 // matrix to convert sphere to ellipsoid
 const worldToScaledEllipsoid = new THREE.Matrix4();
@@ -17,18 +17,18 @@ const scaledHorizonCullingPoint = new THREE.Vector3();
  * @property {boolean} isGlobeLayer - Used to checkout whether this layer is a
  * GlobeLayer. Default is true. You should not change this, as it is used
  * internally for optimisation.
+ *
+ * @extends TiledGeometryLayer
  */
 class GlobeLayer extends TiledGeometryLayer {
   /**
    * A {@link TiledGeometryLayer} to use with a {@link GlobeView}. It has
    * specific method for updating and subdivising its grid.
    *
-   * @extends TiledGeometryLayer
-   *
    * @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 {THREE.Object3d} [object3d=THREE.Group] - The object3d used to
+   * @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
@@ -47,22 +47,30 @@ class GlobeLayer extends TiledGeometryLayer {
    */
   constructor(id, object3d) {
     let config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    const {
+      minSubdivisionLevel = 2,
+      maxSubdivisionLevel = 19,
+      ...tiledConfig
+    } = config;
+
     // Configure tiles
     const scheme = schemeTiles.get('EPSG:4326');
     const schemeTile = globalExtentTMS.get('EPSG:4326').subdivisionByScheme(scheme);
 
     // Supported tile matrix set for color/elevation layer
-    config.tileMatrixSets = ['EPSG:4326', 'EPSG:3857'];
-    const uvCount = config.tileMatrixSets.length;
-    const builder = new BuilderEllipsoidTile({
-      crs: 'EPSG:4978',
+    const tileMatrixSets = ['EPSG:4326', 'EPSG:3857'];
+    const uvCount = tileMatrixSets.length;
+    const builder = new GlobeTileBuilder({
       uvCount
     });
-    super(id, object3d || new THREE.Group(), schemeTile, builder, config);
+    super(id, object3d || new THREE.Group(), schemeTile, builder, {
+      tileMatrixSets,
+      ...tiledConfig
+    });
     this.isGlobeLayer = true;
     this.options.defaultPickingRadius = 5;
-    this.minSubdivisionLevel = this.minSubdivisionLevel == undefined ? 2 : this.minSubdivisionLevel;
-    this.maxSubdivisionLevel = this.maxSubdivisionLevel == undefined ? 19 : this.maxSubdivisionLevel;
+    this.minSubdivisionLevel = minSubdivisionLevel;
+    this.maxSubdivisionLevel = maxSubdivisionLevel;
     this.extent = this.schemeTile[0].clone();
     for (let i = 1; i < this.schemeTile.length; i++) {
       this.extent.union(this.schemeTile[i]);

package/lib/Core/Prefab/Globe/GlobeTileBuilder.js

@@ -0,0 +1,111 @@
+import * as THREE from 'three';
+import Coordinates from "../../Geographic/Coordinates.js";
+import Extent from "../../Geographic/Extent.js";
+const PI_OV_FOUR = Math.PI / 4;
+const INV_TWO_PI = 1.0 / (Math.PI * 2);
+const axisZ = new THREE.Vector3(0, 0, 1);
+const axisY = new THREE.Vector3(0, 1, 0);
+const quatToAlignLongitude = new THREE.Quaternion();
+const quatToAlignLatitude = new THREE.Quaternion();
+const quatNormalToZ = new THREE.Quaternion();
+
+/** Transforms a WGS84 latitude into a usable texture offset. */
+function WGS84ToOneSubY(latitude) {
+  return 1.0 - (0.5 - Math.log(Math.tan(PI_OV_FOUR + THREE.MathUtils.degToRad(latitude) * 0.5)) * INV_TWO_PI);
+}
+
+/** Specialized parameters for the [GlobeTileBuilder]. */
+
+/**
+ * TileBuilder implementation for the purpose of generating globe (or more
+ * precisely ellipsoidal) tile arrangements.
+ */
+export class GlobeTileBuilder {
+  static _crs = 'EPSG:4978';
+  static _computeExtraOffset(params) {
+    const t = WGS84ToOneSubY(params.coordinates.latitude) * params.nbRow;
+    return (!isFinite(t) ? 0 : t) - params.deltaUV1;
+  }
+
+  /**
+   * Buffer holding information about the tile/vertex currently being
+   * processed.
+   */
+
+  get crs() {
+    return GlobeTileBuilder._crs;
+  }
+  constructor(options) {
+    this._transform = {
+      coords: [new Coordinates('EPSG:4326', 0, 0), new Coordinates('EPSG:4326', 0, 0)],
+      position: new THREE.Vector3(),
+      dimension: new THREE.Vector2()
+    };
+
+    // UV: Normalized coordinates (from degree) on the entire tile
+    // EPSG:4326
+    // Offset: Float row coordinate from Pseudo mercator coordinates
+    // EPSG:3857
+    if (options.uvCount > 1) {
+      this.computeExtraOffset = GlobeTileBuilder._computeExtraOffset;
+    }
+  }
+  prepare(params) {
+    const nbRow = 2 ** (params.level + 1.0);
+    let st1 = WGS84ToOneSubY(params.extent.south);
+    if (!isFinite(st1)) {
+      st1 = 0;
+    }
+    const start = st1 % (1.0 / nbRow);
+    const newParams = {
+      nbRow,
+      deltaUV1: (st1 - start) * nbRow,
+      // transformation to align tile's normal to z axis
+      quatNormalToZ: quatNormalToZ.setFromAxisAngle(axisY, -(Math.PI * 0.5 - THREE.MathUtils.degToRad(params.extent.center().latitude))),
+      // let's avoid building too much temp objects
+      coordinates: new Coordinates(this.crs)
+    };
+    params.extent.planarDimensions(this._transform.dimension);
+    return {
+      ...params,
+      ...newParams
+    };
+  }
+  center(extent) {
+    return extent.center(this._transform.coords[0]).as(this.crs, this._transform.coords[1]).toVector3();
+  }
+  vertexPosition(coordinates) {
+    return this._transform.coords[0].setFromValues(coordinates.x, coordinates.y).as(this.crs, this._transform.coords[1]).toVector3(this._transform.position);
+  }
+  vertexNormal() {
+    return this._transform.coords[1].geodesicNormal;
+  }
+  uProject(u, extent) {
+    return extent.west + u * this._transform.dimension.x;
+  }
+  vProject(v, extent) {
+    return extent.south + v * this._transform.dimension.y;
+  }
+  computeShareableExtent(extent) {
+    // NOTE: It should be possible to take advantage of equatorial plane
+    // symmetry, for which we'd have to reverse the tile's UVs.
+    // This would halve the memory requirement when viewing a full globe,
+    // but that case is not that relevant for iTowns' usual use cases and
+    // the globe mesh memory usage is already inconsequential.
+    const sizeLongitude = Math.abs(extent.west - extent.east) / 2;
+    const shareableExtent = new Extent(extent.crs, -sizeLongitude, sizeLongitude, extent.south, extent.north);
+
+    // Compute rotation to transform the tile to position on the ellispoid.
+    // This transformation takes the parents' transformation into account.
+    const rotLon = THREE.MathUtils.degToRad(extent.west - shareableExtent.west);
+    const rotLat = THREE.MathUtils.degToRad(90 - extent.center(this._transform.coords[0]).latitude);
+    quatToAlignLongitude.setFromAxisAngle(axisZ, rotLon);
+    quatToAlignLatitude.setFromAxisAngle(axisY, rotLat);
+    quatToAlignLongitude.multiply(quatToAlignLatitude);
+    return {
+      shareableExtent,
+      quaternion: quatToAlignLongitude.clone(),
+      position: this.center(extent)
+    };
+  }
+}

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

@@ -1,20 +1,19 @@
 import * as THREE from 'three';
 import TiledGeometryLayer from "../../../Layer/TiledGeometryLayer.js";
 import { globalExtentTMS } from "../../Tile/TileGrid.js";
-import PlanarTileBuilder from "./PlanarTileBuilder.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.
    *
-   * @extends TiledGeometryLayer
-   *
    * @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.
@@ -34,19 +33,27 @@ class PlanarLayer extends TiledGeometryLayer {
    */
   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);
     }
-    config.tileMatrixSets = tileMatrixSets;
-    super(id, object3d || new THREE.Group(), [extent], new PlanarTileBuilder({
+    const builder = new PlanarTileBuilder({
       crs: extent.crs
-    }), config);
+    });
+    super(id, object3d || new THREE.Group(), [extent], builder, {
+      tileMatrixSets,
+      ...tiledConfig
+    });
     this.isPlanarLayer = true;
     this.extent = extent;
-    this.minSubdivisionLevel = this.minSubdivisionLevel == undefined ? 0 : this.minSubdivisionLevel;
-    this.maxSubdivisionLevel = this.maxSubdivisionLevel == undefined ? 5 : this.maxSubdivisionLevel;
+    this.minSubdivisionLevel = minSubdivisionLevel;
+    this.maxSubdivisionLevel = maxSubdivisionLevel;
   }
 }
 export default PlanarLayer;

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

@@ -3,70 +3,70 @@ import Coordinates from "../../Geographic/Coordinates.js";
 import Extent from "../../Geographic/Extent.js";
 const quaternion = new THREE.Quaternion();
 const center = new THREE.Vector3();
-class PlanarTileBuilder {
-  constructor() {
-    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    /* istanbul ignore next */
+
+/** 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.crs || options.projection;
-    }
-    if (options.crs) {
-      this.crs = options.crs;
-    } else {
-      throw new Error('options.crs is mandatory for PlanarTileBuilder');
+      console.warn('PlanarTileBuilder projection parameter is deprecated,' + ' use crs instead.');
+      options.crs ??= options.projection;
     }
-    this.tmp = {
+    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;
+    this._uvCount = options.uvCount ?? 1;
+  }
+  get uvCount() {
+    return this._uvCount;
+  }
+  get crs() {
+    return this._crs;
   }
-  // prepare params
-  // init projected object -> params.projected
   prepare(params) {
-    params.nbRow = 2 ** (params.zoom + 1.0);
-    params.projected = new THREE.Vector3();
+    const newParams = params;
+    newParams.nbRow = 2 ** (params.level + 1.0);
+    newParams.coordinates = new Coordinates(this.crs);
+    return newParams;
   }
-
-  // get center tile in cartesian 3D
   center(extent) {
-    extent.center(this.tmp.coords);
-    center.set(this.tmp.coords.x, this.tmp.coords.y, 0);
+    extent.center(this._transform.coords);
+    center.set(this._transform.coords.x, this._transform.coords.y, 0);
     return center;
   }
-
-  // get position 3D cartesian
-  vertexPosition(params) {
-    this.tmp.position.set(params.projected.x, params.projected.y, 0);
-    return this.tmp.position;
+  vertexPosition(coordinates) {
+    this._transform.position.set(coordinates.x, coordinates.y, 0);
+    return this._transform.position;
   }
-
-  // get normal for last vertex
   vertexNormal() {
-    return this.tmp.normal;
+    return this._transform.normal;
   }
-
-  // coord u tile to projected
-  uProjecte(u, params) {
-    params.projected.x = params.extent.west + u * (params.extent.east - params.extent.west);
+  uProject(u, extent) {
+    return extent.west + u * (extent.east - extent.west);
   }
-
-  // coord v tile to projected
-  vProjecte(v, params) {
-    params.projected.y = params.extent.south + v * (params.extent.north - params.extent.south);
+  vProject(v, extent) {
+    return extent.south + v * (extent.north - extent.south);
   }
-  computeSharableExtent(extent) {
-    // compute sharable extent to pool the geometries
+  computeShareableExtent(extent) {
+    // compute shareable extent to pool the geometries
     // the geometry in common extent is identical to the existing input
     // with a translation
-    const sharableExtent = new Extent(extent.crs, 0, Math.abs(extent.west - extent.east), 0, Math.abs(extent.north - extent.south));
     return {
-      sharableExtent,
+      shareableExtent: new Extent(extent.crs, {
+        west: 0,
+        east: Math.abs(extent.west - extent.east),
+        south: 0,
+        north: Math.abs(extent.north - extent.south)
+      }),
       quaternion,
       position: this.center(extent).clone()
     };
   }
-}
-export default PlanarTileBuilder;
+}

package/lib/Core/Prefab/TileBuilder.js

@@ -1,17 +1,23 @@
 import * as THREE from 'three';
-import TileGeometry from "../TileGeometry.js";
+import { TileGeometry } from "../TileGeometry.js";
 import Cache from "../Scheduler/Cache.js";
-import computeBuffers from "./computeBufferTileGeometry.js";
+import { computeBuffers } from "./computeBufferTileGeometry.js";
 import OBB from "../../Renderer/OBB.js";
 const cacheBuffer = new Map();
 const cacheTile = new Cache();
-export default function newTileGeometry(builder, params) {
+
+/**
+ * Reference to a tile's extent with rigid transformations.
+ * Enables reuse of geometry, saving a bit of memory.
+ */
+
+export function newTileGeometry(builder, params) {
   const {
-    sharableExtent,
+    shareableExtent,
     quaternion,
     position
-  } = builder.computeSharableExtent(params.extent);
-  const south = sharableExtent.south.toFixed(6);
+  } = builder.computeShareableExtent(params.extent);
+  const south = shareableExtent.south.toFixed(6);
   const bufferKey = `${builder.crs}_${params.disableSkirt ? 0 : 1}_${params.segments}`;
   let promiseGeometry = cacheTile.get(south, params.level, bufferKey);
 
@@ -22,49 +28,38 @@ export default function newTileGeometry(builder, params) {
       resolve = r;
     });
     cacheTile.set(promiseGeometry, south, params.level, bufferKey);
-    params.extent = sharableExtent;
+    params.extent = shareableExtent;
     params.center = builder.center(params.extent).clone();
-    // Read previously cached values (index and uv.wgs84 only depend on the # of triangles)
+    // Read previously cached values (index and uv.wgs84 only
+    // depend on the # of triangles)
     let cachedBuffers = cacheBuffer.get(bufferKey);
     params.buildIndexAndUv_0 = !cachedBuffers;
-    params.builder = builder;
     let buffers;
     try {
-      buffers = computeBuffers(params);
+      buffers = computeBuffers(builder, params);
     } catch (e) {
       return Promise.reject(e);
     }
     if (!cachedBuffers) {
       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);
       cachedBuffers.uv = new THREE.BufferAttribute(buffers.uvs[0], 2);
 
       // Update cacheBuffer
       cacheBuffer.set(bufferKey, cachedBuffers);
     }
-    buffers.index = cachedBuffers.index;
-    buffers.uvs[0] = cachedBuffers.uv;
-    buffers.position = new THREE.BufferAttribute(buffers.position, 3);
-    buffers.normal = new THREE.BufferAttribute(buffers.normal, 3);
-    if (params.builder.uvCount > 1) {
-      buffers.uvs[1] = new THREE.BufferAttribute(buffers.uvs[1], 1);
-    }
-    const geometry = new TileGeometry(params, buffers);
-    geometry.OBB = new OBB(geometry.boundingBox.min, geometry.boundingBox.max);
-    geometry._count = 0;
-    geometry.dispose = () => {
-      geometry._count--;
-      if (geometry._count <= 0) {
-        // To avoid remove index buffer and attribute buffer uv
-        //  error un-bound buffer in webgl with VAO rendering.
-        // Could be removed if the attribute buffer deleting is
-        //  taken into account in the buffer binding state (in THREE.WebGLBindingStates code).
-        geometry.index = null;
-        delete geometry.attributes.uv;
-        THREE.BufferGeometry.prototype.dispose.call(geometry);
-        cacheTile.delete(south, params.level, bufferKey);
-      }
+    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, [south, params.level, bufferKey]);
     resolve(geometry);
     return Promise.resolve({
       geometry,