itowns 2.42.1-next.4 → 2.42.1-next.6

package/examples/entwine_simple_loader.html

@@ -64,10 +64,17 @@
             }
 
             function readEPTURL() {
-                var url = document.getElementById('ept_url').value || new URL(location.href).searchParams.get('ept');
+                const urlParams = new URL(location.href).searchParams
+                var url = document.getElementById('ept_url').value || urlParams.get('ept');
 
                 if (url) {
-                    loadEPT(url);
+                    const options = {};
+                    urlParams.keys().forEach(key => {
+                        if (key !== 'ept') {
+                            options[key] = parseInt(urlParams.get(key), 10);
+                        }
+                    });
+                    loadEPT(url, options);
 
                     document.getElementById('share').innerHTML = '<a href="' +
                         location.href.replace(location.search, '') +
@@ -77,7 +84,7 @@
                 }
             }
 
-            function loadEPT(url) {
+            function loadEPT(url, options) {
                 eptSource = new itowns.EntwinePointTileSource({ url });
 
                 if (eptLayer) {
@@ -87,14 +94,17 @@
                     eptLayer.delete();
                 }
 
-                eptLayer = new itowns.EntwinePointTileLayer('Entwine Point Tile', {
+                const config = {
                     source: eptSource,
                     crs: view.referenceCrs,
-                });
+                    ...options,
+                }
+                eptLayer = new itowns.EntwinePointTileLayer('Entwine Point Tile', config);
 
                 view.addLayer(eptLayer).then(onLayerReady);
 
-                debug.PotreeDebug.initTools(view, eptLayer, debugGui);
+                eptLayer.whenReady
+                    .then(() => debug.PotreeDebug.initTools(view, eptLayer, debugGui));
 
                 function dblClickHandler(event) {
                     var pick = view.pickObjectsAt(event, 5, eptLayer);

package/examples/source_file_gpx_3d.html

@@ -59,8 +59,6 @@
                 this.updateMatrixWorld();
             }
 
-            var waypointGeometry = new itowns.THREE.BoxGeometry(1, 1, 80);
-            var waypointMaterial = new itowns.THREE.MeshBasicMaterial({ color: 0xffffff });
             const style = {
                 stroke: {
                     color: 'red',
@@ -70,6 +68,8 @@
                     color: 'white',
                 }
             };
+            var waypointGeometry = new itowns.THREE.BoxGeometry(1, 1, 80);
+            var waypointMaterial = new itowns.THREE.MeshBasicMaterial({ color: 0xffffff });
             // Listen for globe full initialisation event
             view.addEventListener(itowns.GLOBE_VIEW_EVENTS.GLOBE_INITIALIZED, function () {
                 console.info('Globe initialized');

package/lib/Converter/Feature2Mesh.js

@@ -24,8 +24,8 @@ let style;
 const dim_ref = new THREE.Vector2();
 const dim = new THREE.Vector2();
 const normal = new THREE.Vector3();
-const base = new THREE.Vector3();
-const extrusion = new THREE.Vector3();
+const baseCoord = new THREE.Vector3();
+const topCoord = new THREE.Vector3();
 const inverseScale = new THREE.Vector3();
 const extent = new _Extent.default('EPSG:4326', 0, 0, 0, 0);
 const _color = new THREE.Color();
@@ -44,13 +44,6 @@ class FeatureMesh extends THREE.Group {
     this.#collection = new THREE.Group().add(this.meshes);
     this.#collection.quaternion.copy(collection.quaternion);
     this.#collection.position.copy(collection.position);
-    if (collection.crs == 'EPSG:4978') {
-      normal.copy(collection.center.geodesicNormal);
-    } else {
-      normal.set(0, 0, 1);
-    }
-    normal.multiplyScalar(collection.center.z);
-    this.#collection.position.sub(normal);
     this.#collection.scale.copy(collection.scale);
     this.#collection.updateMatrix();
     this.#originalCrs = collection.crs;
@@ -194,21 +187,27 @@ function featureToPoint(feature, options) {
       if (feature.normals) {
         normal.fromArray(feature.normals, v).multiply(inverseScale);
       }
-      coord.copy(context.setLocalCoordinatesFromArray(feature.vertices, v));
+      const localCoord = context.setLocalCoordinatesFromArray(feature.vertices, v);
       style.setContext(context);
       const {
         base_altitude,
         color,
         radius
       } = style.point;
-      coord.z = 0;
-      if (!pointMaterialSize.includes(radius)) {
-        pointMaterialSize.push(radius);
+      coord.copy(localCoord).applyMatrix4(context.collection.matrixWorld);
+      if (coord.crs == 'EPSG:4978') {
+        // altitude convertion from geocentered to elevation (from ground)
+        coord.as('EPSG:4326', coord);
       }
 
-      // populate vertices
-      base.copy(normal).multiplyScalar(base_altitude).add(coord).toArray(vertices, v);
+      // Calculate the new coordinates using the elevation shift (baseCoord)
+      baseCoord.copy(normal).multiplyScalar(base_altitude - coord.z).add(localCoord)
+      // and update the geometry buffer (vertices).
+      .toArray(vertices, v);
       toColor(color).multiplyScalar(255).toArray(colors, v);
+      if (!pointMaterialSize.includes(radius)) {
+        pointMaterialSize.push(radius);
+      }
       batchIds[j] = id;
     }
     featureId++;
@@ -233,7 +232,6 @@ function featureToLine(feature, options) {
   let featureId = 0;
   const vertices = new Float32Array(ptsIn.length);
   const geom = new THREE.BufferGeometry();
-  geom.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
   const lineMaterialWidth = [];
   context.setFeature(feature);
   const countIndices = (count - feature.geometries.length) * 2;
@@ -265,21 +263,27 @@ function featureToLine(feature, options) {
       if (feature.normals) {
         normal.fromArray(feature.normals, v).multiply(inverseScale);
       }
-      coord.copy(context.setLocalCoordinatesFromArray(feature.vertices, v));
+      const localCoord = context.setLocalCoordinatesFromArray(feature.vertices, v);
       style.setContext(context);
       const {
         base_altitude,
         color,
         width
       } = style.stroke;
-      coord.z = 0;
-      if (!lineMaterialWidth.includes(width)) {
-        lineMaterialWidth.push(width);
+      coord.copy(localCoord).applyMatrix4(context.collection.matrixWorld);
+      if (coord.crs == 'EPSG:4978') {
+        // altitude convertion from geocentered to elevation (from ground)
+        coord.as('EPSG:4326', coord);
       }
 
-      // populate geometry buffers
-      base.copy(normal).multiplyScalar(base_altitude).add(coord).toArray(vertices, v);
+      // Calculate the new coordinates using the elevation shift (baseCoord)
+      baseCoord.copy(normal).multiplyScalar(base_altitude - coord.z).add(localCoord)
+      // and update the geometry buffer (vertices).
+      .toArray(vertices, v);
       toColor(color).multiplyScalar(255).toArray(colors, v);
+      if (!lineMaterialWidth.includes(width)) {
+        lineMaterialWidth.push(width);
+      }
       batchIds[j] = id;
     }
     featureId++;
@@ -289,6 +293,7 @@ function featureToLine(feature, options) {
     // TODO CREATE material for each feature
     console.warn('Too many differents stroke.width, only the first one will be used');
   }
+  geom.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
   geom.setAttribute('color', new THREE.BufferAttribute(colors, 3, true));
   geom.setAttribute('batchId', new THREE.BufferAttribute(batchIds, 1));
   geom.setIndex(new THREE.BufferAttribute(indices, 1));
@@ -320,18 +325,24 @@ function featureToPolygon(feature, options) {
       if (feature.normals) {
         normal.fromArray(feature.normals, i).multiply(inverseScale);
       }
-      coord.copy(context.setLocalCoordinatesFromArray(feature.vertices, i));
+      const localCoord = context.setLocalCoordinatesFromArray(feature.vertices, i);
       style.setContext(context);
       const {
         base_altitude,
         color
       } = style.fill;
-      coord.z = 0;
+      coord.copy(localCoord).applyMatrix4(context.collection.matrixWorld);
+      if (coord.crs == 'EPSG:4978') {
+        // altitude convertion from geocentered to elevation (from ground)
+        coord.as('EPSG:4326', coord);
+      }
 
-      // populate geometry buffers
-      base.copy(normal).multiplyScalar(base_altitude).add(coord).toArray(vertices, i);
-      batchIds[b] = id;
+      // Calculate the new coordinates using the elevation shift (baseCoord)
+      baseCoord.copy(normal).multiplyScalar(base_altitude - coord.z).add(localCoord)
+      // and update the geometry buffer (vertices).
+      .toArray(vertices, i);
       toColor(color).multiplyScalar(255).toArray(colors, i);
+      batchIds[b] = id;
     }
     featureId++;
     const geomVertices = vertices.slice(start * 3, end * 3);
@@ -386,21 +397,27 @@ function featureToExtrudedPolygon(feature, options) {
       if (feature.normals) {
         normal.fromArray(feature.normals, i).multiply(inverseScale);
       }
-      coord.copy(context.setLocalCoordinatesFromArray(ptsIn, i));
+      const localCoord = context.setLocalCoordinatesFromArray(ptsIn, i);
       style.setContext(context);
       const {
         base_altitude,
         extrusion_height,
         color
       } = style.fill;
-      coord.z = 0;
+      coord.copy(localCoord).applyMatrix4(context.collection.matrixWorld);
+      if (coord.crs == 'EPSG:4978') {
+        // altitude convertion from geocentered to elevation (from ground)
+        coord.as('EPSG:4326', coord);
+      }
 
-      // populate base geometry buffers
-      base.copy(normal).multiplyScalar(base_altitude).add(coord).toArray(vertices, i);
+      // Calculate the new base coordinates using the elevation shift (baseCoord)
+      baseCoord.copy(normal).multiplyScalar(base_altitude - coord.z).add(localCoord)
+      // and update the geometry buffer (vertices).
+      .toArray(vertices, i);
       batchIds[b] = id;
 
       // populate top geometry buffers
-      extrusion.copy(normal).multiplyScalar(extrusion_height).add(base).toArray(vertices, t);
+      topCoord.copy(normal).multiplyScalar(extrusion_height).add(baseCoord).toArray(vertices, t);
       batchIds[b + totalVertices] = id;
 
       // coloring base and top mesh

package/lib/Core/Style.js

@@ -24,8 +24,8 @@ const matrix = svg.createSVGMatrix();
 const inv255 = 1 / 255;
 const canvas = typeof document !== 'undefined' ? document.createElement('canvas') : {};
 function baseAltitudeDefault(properties, ctx) {
-  var _ctx$coordinates, _ctx$collection, _ctx$collection$cente;
-  return (ctx === null || ctx === void 0 ? void 0 : (_ctx$coordinates = ctx.coordinates) === null || _ctx$coordinates === void 0 ? void 0 : _ctx$coordinates.z) || (ctx === null || ctx === void 0 ? void 0 : (_ctx$collection = ctx.collection) === null || _ctx$collection === void 0 ? void 0 : (_ctx$collection$cente = _ctx$collection.center) === null || _ctx$collection$cente === void 0 ? void 0 : _ctx$collection$cente.z) || 0;
+  var _ctx$coordinates;
+  return (ctx === null || ctx === void 0 ? void 0 : (_ctx$coordinates = ctx.coordinates) === null || _ctx$coordinates === void 0 ? void 0 : _ctx$coordinates.z) || 0;
 }
 function readExpression(property, ctx) {
   if (property != undefined) {

package/lib/Layer/EntwinePointTileLayer.js

@@ -60,6 +60,8 @@ class EntwinePointTileLayer extends _PointCloudLayer.default {
       this.root = new _EntwinePointTileNode.default(0, 0, 0, 0, this, -1);
       this.root.bbox.min.fromArray(this.source.boundsConforming, 0);
       this.root.bbox.max.fromArray(this.source.boundsConforming, 3);
+      this.minElevationRange = this.source.boundsConforming[2];
+      this.maxElevationRange = this.source.boundsConforming[5];
       this.extent = _Extent.default.fromBox3(config.crs || 'EPSG:4326', this.root.bbox);
       return this.root.loadOctree().then(resolve);
     });

package/lib/Layer/PointCloudLayer.js

@@ -82,9 +82,16 @@ function markForDeletion(elt) {
   }
 }
 function changeIntensityRange(layer) {
-  if (layer.material.intensityRange) {
-    layer.material.intensityRange.set(layer.minIntensityRange, layer.maxIntensityRange);
-  }
+  var _layer$material$inten;
+  (_layer$material$inten = layer.material.intensityRange) === null || _layer$material$inten === void 0 ? void 0 : _layer$material$inten.set(layer.minIntensityRange, layer.maxIntensityRange);
+}
+function changeElevationRange(layer) {
+  var _layer$material$eleva;
+  (_layer$material$eleva = layer.material.elevationRange) === null || _layer$material$eleva === void 0 ? void 0 : _layer$material$eleva.set(layer.minElevationRange, layer.maxElevationRange);
+}
+function changeAngleRange(layer) {
+  var _layer$material$angle;
+  (_layer$material$angle = layer.material.angleRange) === null || _layer$material$angle === void 0 ? void 0 : _layer$material$angle.set(layer.minAngleRange, layer.maxAngleRange);
 }
 
 /**
@@ -154,12 +161,18 @@ class PointCloudLayer extends _GeometryLayer.default {
     this.pointBudget = config.pointBudget || 2000000;
     this.pointSize = config.pointSize === 0 || !isNaN(config.pointSize) ? config.pointSize : 4;
     this.sseThreshold = config.sseThreshold || 2;
-    this.defineLayerProperty('minIntensityRange', config.minIntensityRange || 0, changeIntensityRange);
-    this.defineLayerProperty('maxIntensityRange', config.maxIntensityRange || 1, changeIntensityRange);
+    this.defineLayerProperty('minIntensityRange', config.minIntensityRange || 1, changeIntensityRange);
+    this.defineLayerProperty('maxIntensityRange', config.maxIntensityRange || 65536, changeIntensityRange);
+    this.defineLayerProperty('minElevationRange', config.minElevationRange || 0, changeElevationRange);
+    this.defineLayerProperty('maxElevationRange', config.maxElevationRange || 1000, changeElevationRange);
+    this.defineLayerProperty('minAngleRange', config.minAngleRange || -90, changeAngleRange);
+    this.defineLayerProperty('maxAngleRange', config.maxAngleRange || 90, changeAngleRange);
     this.material = config.material || {};
     if (!this.material.isMaterial) {
       config.material = config.material || {};
       config.material.intensityRange = new THREE.Vector2(this.minIntensityRange, this.maxIntensityRange);
+      config.material.elevationRange = new THREE.Vector2(this.minElevationRange, this.maxElevationRange);
+      config.material.angleRange = new THREE.Vector2(this.minAngleRange, this.maxAngleRange);
       this.material = new _PointsMaterial.default(config.material);
     }
     this.material.defines = this.material.defines || {};

package/lib/Parser/LASLoader.js

@@ -51,6 +51,7 @@ class LASLoader {
     const getClassification = view.getter('Classification');
     const getPointSourceID = view.getter('PointSourceId');
     const getColor = view.dimensions.Red ? ['Red', 'Green', 'Blue'].map(view.getter) : undefined;
+    const getScanAngle = view.getter('ScanAngle');
     const positions = new Float32Array(view.pointCount * 3);
     const intensities = new Uint16Array(view.pointCount);
     const returnNumbers = new Uint8Array(view.pointCount);
@@ -58,6 +59,14 @@ class LASLoader {
     const classifications = new Uint8Array(view.pointCount);
     const pointSourceIDs = new Uint16Array(view.pointCount);
     const colors = getColor ? new Uint8Array(view.pointCount * 4) : undefined;
+    /*
+    As described by the LAS spec, Scan Angle is encoded:
+    - as signed char in a valid range from -90 to +90 (degrees) prior to the LAS 1.4 Point Data Record Formats (PDRF) 6
+    - as a signed short in a valid range from -30 000 to +30 000. Those values represents scan angles from -180 to +180
+      degrees with an increment of 0.006 for PDRF >= 6.
+    The copc.js library does the degree convertion and stores it as a `Float32`.
+    */
+    const scanAngles = new Float32Array(view.pointCount);
     for (let i = 0; i < view.pointCount; i++) {
       // `getPosition` apply scale and offset transform to the X, Y, Z
       // values. See https://github.com/connormanning/copc.js/blob/master/src/las/extractor.ts.
@@ -85,6 +94,7 @@ class LASLoader {
       }
       classifications[i] = getClassification(i);
       pointSourceIDs[i] = getPointSourceID(i);
+      scanAngles[i] = getScanAngle(i);
     }
     return {
       position: positions,
@@ -93,7 +103,8 @@ class LASLoader {
       numberOfReturns,
       classification: classifications,
       pointSourceID: pointSourceIDs,
-      color: colors
+      color: colors,
+      scanAngle: scanAngles
     };
   }
 

package/lib/Parser/LASParser.js

@@ -58,13 +58,13 @@ var _default = {
       geometry.userData = parsedData.header;
       const positionBuffer = new THREE.BufferAttribute(attributes.position, 3);
       geometry.setAttribute('position', positionBuffer);
-      const intensityBuffer = new THREE.BufferAttribute(attributes.intensity, 1, true);
+      const intensityBuffer = new THREE.BufferAttribute(attributes.intensity, 1);
       geometry.setAttribute('intensity', intensityBuffer);
       const returnNumber = new THREE.BufferAttribute(attributes.returnNumber, 1);
       geometry.setAttribute('returnNumber', returnNumber);
       const numberOfReturns = new THREE.BufferAttribute(attributes.numberOfReturns, 1);
       geometry.setAttribute('numberOfReturns', numberOfReturns);
-      const classBuffer = new THREE.BufferAttribute(attributes.classification, 1, true);
+      const classBuffer = new THREE.BufferAttribute(attributes.classification, 1);
       geometry.setAttribute('classification', classBuffer);
       const pointSourceID = new THREE.BufferAttribute(attributes.pointSourceID, 1);
       geometry.setAttribute('pointSourceID', pointSourceID);
@@ -72,6 +72,8 @@ var _default = {
         const colorBuffer = new THREE.BufferAttribute(attributes.color, 4, true);
         geometry.setAttribute('color', colorBuffer);
       }
+      const scanAngle = new THREE.BufferAttribute(attributes.scanAngle, 1);
+      geometry.setAttribute('scanAngle', scanAngle);
       geometry.computeBoundingBox();
       return geometry;
     });