feat(TiledGeometryLayer): layer can now hide skirt

Author: AnthonyGlt

src/Converter/convertToTile.js

@@ -45,8 +45,9 @@ export default {
         const paramsGeometry = {
             extent,
             level,
-            segment: layer.segments || 16,
+            segments: layer.segments || 16,
             disableSkirt: layer.disableSkirt,
+            hideSkirt: layer.hideSkirt,
         };
 
         return newTileGeometry(builder, paramsGeometry).then((result) => {

src/Core/Prefab/TileBuilder.js

@@ -10,7 +10,7 @@ const cacheTile = new Cache();
 export default function newTileGeometry(builder, params) {
     const { sharableExtent, quaternion, position } = builder.computeSharableExtent(params.extent);
     const south = sharableExtent.south.toFixed(6);
-    const bufferKey = `${builder.crs}_${params.disableSkirt ? 0 : 1}_${params.segment}`;
+    const bufferKey = `${builder.crs}_${params.disableSkirt ? 0 : 1}_${params.segments}`;
     let promiseGeometry = cacheTile.get(south, params.level, bufferKey);
 
     // build geometry if doesn't exist

src/Core/Prefab/computeBufferTileGeometry.js

@@ -1,5 +1,10 @@
 import * as THREE from 'three';
 
+export function getBufferIndexSize(segments, noSkirt) {
+    const triangles = (segments) * (segments) * 2 + (noSkirt ? 0 : 4 * segments * 2);
+    return triangles * 3;
+}
+
 export default function computeBuffers(params) {
     // Create output buffers.
     const outBuffers = {
@@ -26,7 +31,7 @@ export default function computeBuffers(params) {
     const computeUvs = [];
 
     const builder = params.builder;
-    const nSeg = params.segment || 8;
+    const nSeg = params.segments;
     // segments count :
     // Tile : (nSeg + 1) * (nSeg + 1)
     // Skirt : 8 * (nSeg - 1)
@@ -35,8 +40,6 @@ export default function computeBuffers(params) {
         throw new Error('Tile segments count is too big');
     }
 
-    const triangles = (nSeg) * (nSeg) * 2 + (params.disableSkirt ? 0 : 4 * nSeg * 2);
-
     outBuffers.position = new Float32Array(nVertex * 3);
     outBuffers.normal = new Float32Array(nVertex * 3);
 
@@ -46,13 +49,14 @@ export default function computeBuffers(params) {
     }
 
     computeUvs[0] = () => {};
+    const bufferIndexSize = getBufferIndexSize(nSeg, params.disableSkirt);
     if (params.buildIndexAndUv_0) {
         if (nVertex < 2 ** 8) {
-            outBuffers.index = new Uint8Array(triangles * 3);
+            outBuffers.index = new Uint8Array(bufferIndexSize);
         } else if (nVertex < 2 ** 16) {
-            outBuffers.index = new Uint16Array(triangles * 3);
+            outBuffers.index = new Uint16Array(bufferIndexSize);
         } else if (nVertex < 2 ** 32) {
-            outBuffers.index = new Uint32Array(triangles * 3);
+            outBuffers.index = new Uint32Array(bufferIndexSize);
         }
         outBuffers.uvs[0] = new Float32Array(nVertex * 2);
         computeUvs[0] = (id, u, v) => {

src/Core/TileGeometry.js

@@ -1,5 +1,5 @@
 import * as THREE from 'three';
-import computeBuffers from 'Core/Prefab/computeBufferTileGeometry';
+import computeBuffers, { getBufferIndexSize } from 'Core/Prefab/computeBufferTileGeometry';
 
 function defaultBuffers(params) {
     params.buildIndexAndUv_0 = true;
@@ -20,7 +20,7 @@ class TileGeometry extends THREE.BufferGeometry {
         super();
         this.center = params.center;
         this.extent = params.extent;
-
+        this.segments = params.segments;
         this.setIndex(buffers.index);
         this.setAttribute('position', buffers.position);
         this.setAttribute('normal', buffers.normal);
@@ -31,6 +31,12 @@ class TileGeometry extends THREE.BufferGeometry {
 
         this.computeBoundingBox();
         this.OBB = {};
+        if (params.hideSkirt) {
+            this.hideSkirt = params.hideSkirt;
+        }
+    }
+    set hideSkirt(value) {
+        this.setDrawRange(0, getBufferIndexSize(this.segments, value));
     }
 }
 

src/Layer/TiledGeometryLayer.js

@@ -16,7 +16,8 @@ const boundingSphereCenter = new THREE.Vector3();
  * @property {boolean} isTiledGeometryLayer - Used to checkout whether this
  * layer is a TiledGeometryLayer. Default is true. You should not change this,
  * as it is used internally for optimisation.
- *
+ * @property {boolean} hideSkirt (default false) - Used to hide the skirt (tile borders).
+ * Useful when the layer opacity < 1
  */
 class TiledGeometryLayer extends GeometryLayer {
     /**
@@ -70,6 +71,7 @@ class TiledGeometryLayer extends GeometryLayer {
         this.object3d.geoidHeight = 0;
 
         this.protocol = 'tile';
+        this._hideSkirt = false;
 
         this.sseSubdivisionThreshold = this.sseSubdivisionThreshold || 1.0;
 
@@ -101,6 +103,19 @@ class TiledGeometryLayer extends GeometryLayer {
         this.maxScreenSizeNode = this.sseSubdivisionThreshold * (SIZE_DIAGONAL_TEXTURE * 2);
     }
 
+    get hideSkirt() {
+        return this._hideSkirt;
+    }
+    set hideSkirt(value) {
+        this._hideSkirt = value;
+        for (const node of this.level0Nodes) {
+            node.traverse((obj) => {
+                if (obj.isTileMesh) {
+                    obj.geometry.hideSkirt = value;
+                }
+            });
+        }
+    }
     /**
      * Picking method for this layer. It uses the {@link Picking#pickTilesAt}
      * method.

src/Renderer/OBB.js

@@ -107,11 +107,11 @@ class OBB extends THREE.Object3D {
         if (extent.crs == 'EPSG:4326') {
             const { sharableExtent, quaternion, position } = builder.computeSharableExtent(extent);
             // Compute the minimum count of segment to build tile
-            const segment = Math.max(Math.floor(sharableExtent.planarDimensions(dimension).x / 90 + 1), 2);
+            const segments = Math.max(Math.floor(sharableExtent.planarDimensions(dimension).x / 90 + 1), 2);
             const paramsGeometry = {
                 extent: sharableExtent,
                 level: 0,
-                segment,
+                segments,
                 disableSkirt: true,
                 builder,
             };

test/unit/obb.js

@@ -51,7 +51,7 @@ function assertVerticesAreInOBB(builder, extent) {
         extent,
         disableSkirt: true,
         level: 0,
-        segment: 1,
+        segments: 1,
     };
 
     return newTileGeometry(builder, params)

test/unit/tilemesh.js

@@ -79,7 +79,7 @@ describe('TileMesh', function () {
         const paramsGeometry = {
             extent: planarlayer.object3d.children[0].extent,
             level: 0,
-            segment: 260,
+            segments: 260,
             disableSkirt: true,
         };
 
@@ -91,7 +91,7 @@ describe('TileMesh', function () {
         const paramsGeometry2 = {
             extent: planarlayer.object3d.children[0].extent,
             level: 0,
-            segment: (2 ** 16),
+            segments: (2 ** 16),
             disableSkirt: true,
         };
 
@@ -130,7 +130,7 @@ describe('TileMesh', function () {
         const paramsGeometry = {
             extent: planarlayer.object3d.children[0].extent,
             level: 0,
-            segment: 4,
+            segments: 4,
             disableSkirt: true,
         };
 
@@ -147,7 +147,7 @@ describe('TileMesh', function () {
         const paramsGeometry = {
             extent: planarlayer.object3d.children[0].extent,
             level: 0,
-            segment: 2,
+            segments: 2,
             disableSkirt: true,
         };