@map-colonies/react-components 3.7.2 → 3.8.1

package/src/lib/cesium-map/terrain-providers/custom/quantized-mesh-decoder.ts

@@ -0,0 +1,321 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import {
+  IDecodedTile,
+  IDecodedTileHeader,
+  IExtensions,
+} from './quantized-mesh-terrain-provider';
+
+const LITTLE_ENDIAN = true;
+const MAX_VERTEX_COUNT = 65536;
+
+export const DECODING_STEPS = {
+  header: 0,
+  vertices: 1,
+  triangleIndices: 2,
+  edgeIndices: 3,
+  extensions: 4,
+};
+
+const QUANTIZED_MESH_HEADER = {
+  centerX: Float64Array.BYTES_PER_ELEMENT,
+  centerY: Float64Array.BYTES_PER_ELEMENT,
+  centerZ: Float64Array.BYTES_PER_ELEMENT,
+
+  minHeight: Float32Array.BYTES_PER_ELEMENT,
+  maxHeight: Float32Array.BYTES_PER_ELEMENT,
+
+  boundingSphereCenterX: Float64Array.BYTES_PER_ELEMENT,
+  boundingSphereCenterY: Float64Array.BYTES_PER_ELEMENT,
+  boundingSphereCenterZ: Float64Array.BYTES_PER_ELEMENT,
+  boundingSphereRadius: Float64Array.BYTES_PER_ELEMENT,
+
+  horizonOcclusionPointX: Float64Array.BYTES_PER_ELEMENT,
+  horizonOcclusionPointY: Float64Array.BYTES_PER_ELEMENT,
+  horizonOcclusionPointZ: Float64Array.BYTES_PER_ELEMENT,
+};
+
+const decodeZigZag = (value: number): number => {
+  return (value >> 1) ^ -(value & 1);
+};
+
+const decodeIndex = (
+  buffer: ArrayBufferLike,
+  position: number,
+  indicesCount: number,
+  bytesPerIndex: number,
+  encoded: boolean
+): Uint16Array | Uint32Array => {
+  let indices;
+
+  if (bytesPerIndex === 2) {
+    indices = new Uint16Array(buffer, position, indicesCount);
+  } else {
+    indices = new Uint32Array(buffer, position, indicesCount);
+  }
+
+  if (!encoded) {
+    return indices;
+  }
+
+  let highest = 0;
+
+  for (let i = 0; i < indices.length; ++i) {
+    const code = indices[i];
+
+    indices[i] = highest - code;
+
+    if (code === 0) {
+      ++highest;
+    }
+  }
+
+  return indices;
+};
+
+const convertFromTypedArrayToNumbersArray = (
+  array: Uint16Array | Uint32Array
+): number[] => {
+  const numbersArray: number[] = [];
+  for (let i = 0; i < array.length; ++i) {
+    numbersArray.push(array[i]);
+  }
+  return numbersArray;
+};
+
+export const decode = (data: ArrayBufferLike): IDecodedTile => {
+  const maxDecodingStep = DECODING_STEPS.extensions;
+  const view = new DataView(data);
+  const header = {} as IDecodedTileHeader;
+  let position = 0;
+
+  // Decode Header
+
+  Object.keys(QUANTIZED_MESH_HEADER).forEach(
+    (key: string, bytesCount: number) => {
+      // @ts-ignore
+      // eslint-disable-next-line
+      header[key] =
+        bytesCount === 8
+          ? view.getFloat64(position, LITTLE_ENDIAN)
+          : view.getFloat32(position, LITTLE_ENDIAN);
+      position += bytesCount;
+    }
+  );
+
+  const headerEndPosition = position;
+
+  // if (maxDecodingStep < DECODING_STEPS.vertices) {
+  //   return { header };
+  // }
+
+  // Decode Vertex Data
+
+  position = headerEndPosition;
+
+  let vertexCount = view.getUint32(position, LITTLE_ENDIAN);
+
+  const vertexData = new Uint16Array(vertexCount * 3);
+
+  position += Uint32Array.BYTES_PER_ELEMENT;
+
+  const bytesPerArrayElement = Uint16Array.BYTES_PER_ELEMENT;
+  const elementArrayLength = vertexCount * bytesPerArrayElement;
+  const uArrayStartPosition = position;
+  const vArrayStartPosition = uArrayStartPosition + elementArrayLength;
+  const heightArrayStartPosition = vArrayStartPosition + elementArrayLength;
+
+  let u = 0;
+  let v = 0;
+  let height = 0;
+
+  for (let i = 0; i < vertexCount; i++) {
+    u += decodeZigZag(
+      view.getUint16(
+        uArrayStartPosition + bytesPerArrayElement * i,
+        LITTLE_ENDIAN
+      )
+    );
+    v += decodeZigZag(
+      view.getUint16(
+        vArrayStartPosition + bytesPerArrayElement * i,
+        LITTLE_ENDIAN
+      )
+    );
+    height += decodeZigZag(
+      view.getUint16(
+        heightArrayStartPosition + bytesPerArrayElement * i,
+        LITTLE_ENDIAN
+      )
+    );
+
+    vertexData[i] = u;
+    vertexData[i + vertexCount] = v;
+    vertexData[i + vertexCount * 2] = height;
+  }
+
+  position += elementArrayLength * 3;
+
+  const vertexDataEndPosition = position;
+
+  // if (maxDecodingStep < DECODING_STEPS.triangleIndices) {
+  //   return { header, vertexData };
+  // }
+
+  // Decode Triangle Indices
+
+  position = vertexDataEndPosition;
+
+  vertexCount = vertexData.length / 3;
+
+  const bytesPerIndex =
+    vertexCount > MAX_VERTEX_COUNT
+      ? Uint32Array.BYTES_PER_ELEMENT
+      : Uint16Array.BYTES_PER_ELEMENT;
+
+  if (position % bytesPerIndex !== 0) {
+    position += bytesPerIndex - (position % bytesPerIndex);
+  }
+
+  const triangleCount = view.getUint32(position, LITTLE_ENDIAN);
+  position += Uint32Array.BYTES_PER_ELEMENT;
+
+  const triangleIndicesCount = triangleCount * 3;
+  const triangleIndices = decodeIndex(
+    view.buffer,
+    position,
+    triangleIndicesCount,
+    bytesPerIndex,
+    true
+  );
+  position += triangleIndicesCount * bytesPerIndex;
+
+  const triangleIndicesEndPosition = position;
+
+  // if (maxDecodingStep < DECODING_STEPS.edgeIndices) {
+  //   return { header, vertexData, triangleIndices };
+  // }
+
+  // Decode Edge Indices
+
+  position = triangleIndicesEndPosition;
+
+  vertexCount = vertexData.length / 3;
+
+  // bytesPerIndex = vertexCount > MAX_VERTEX_COUNT
+  //   ? Uint32Array.BYTES_PER_ELEMENT
+  //   : Uint16Array.BYTES_PER_ELEMENT;
+
+  const westVertexCount = view.getUint32(position, LITTLE_ENDIAN);
+  position += Uint32Array.BYTES_PER_ELEMENT;
+
+  const westIndices = convertFromTypedArrayToNumbersArray(
+    decodeIndex(view.buffer, position, westVertexCount, bytesPerIndex, false)
+  );
+  position += westVertexCount * bytesPerIndex;
+
+  const southVertexCount = view.getUint32(position, LITTLE_ENDIAN);
+  position += Uint32Array.BYTES_PER_ELEMENT;
+
+  const southIndices = convertFromTypedArrayToNumbersArray(
+    decodeIndex(view.buffer, position, southVertexCount, bytesPerIndex, false)
+  );
+  position += southVertexCount * bytesPerIndex;
+
+  const eastVertexCount = view.getUint32(position, LITTLE_ENDIAN);
+  position += Uint32Array.BYTES_PER_ELEMENT;
+
+  const eastIndices = convertFromTypedArrayToNumbersArray(
+    decodeIndex(view.buffer, position, eastVertexCount, bytesPerIndex, false)
+  );
+  position += eastVertexCount * bytesPerIndex;
+
+  const northVertexCount = view.getUint32(position, LITTLE_ENDIAN);
+  position += Uint32Array.BYTES_PER_ELEMENT;
+
+  const northIndices = convertFromTypedArrayToNumbersArray(
+    decodeIndex(view.buffer, position, northVertexCount, bytesPerIndex, false)
+  );
+  position += northVertexCount * bytesPerIndex;
+
+  const edgeIndicesEndPosition = position;
+
+  if (maxDecodingStep < DECODING_STEPS.extensions) {
+    return {
+      header,
+      vertexData,
+      triangleIndices,
+      westIndices,
+      northIndices,
+      eastIndices,
+      southIndices,
+    };
+  }
+
+  // Decode Extensions
+
+  const extensions = {} as IExtensions;
+
+  if (view.byteLength > edgeIndicesEndPosition) {
+    position = edgeIndicesEndPosition;
+
+    while (position < view.byteLength) {
+      const extensionId = view.getUint8(position);
+      position += Uint8Array.BYTES_PER_ELEMENT;
+
+      const extensionLength = view.getUint32(position, true);
+      position += Uint32Array.BYTES_PER_ELEMENT;
+
+      const extensionView = new DataView(
+        view.buffer,
+        position,
+        extensionLength
+      );
+
+      switch (extensionId) {
+        case 1: {
+          extensions.vertexNormals = new Uint8Array(
+            extensionView.buffer,
+            extensionView.byteOffset,
+            extensionView.byteLength
+          );
+          break;
+        }
+        case 2: {
+          extensions.waterMask = extensionView.buffer.slice(
+            extensionView.byteOffset,
+            extensionView.byteOffset + extensionView.byteLength
+          );
+          break;
+        }
+        case 4: {
+          const jsonLength = extensionView.getUint32(0, LITTLE_ENDIAN);
+          let jsonString = '';
+          for (let i = 0; i < jsonLength; ++i) {
+            jsonString += String.fromCharCode(
+              extensionView.getUint8(Uint32Array.BYTES_PER_ELEMENT + i)
+            );
+          }
+          // eslint-disable-next-line
+          extensions.metadata = JSON.parse(jsonString);
+          break;
+        }
+        default: {
+          console.warn(`Unknown extension with id ${extensionId}`);
+        }
+      }
+
+      position += extensionLength;
+    }
+  }
+
+  return {
+    header,
+    vertexData,
+    triangleIndices,
+    westIndices,
+    northIndices,
+    eastIndices,
+    southIndices,
+    extensions,
+  };
+};

package/src/lib/cesium-map/terrain-providers/custom/quantized-mesh-terrain-provider.ts

@@ -0,0 +1,237 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import {
+  BoundingSphere,
+  Cartesian3,
+  Cartographic,
+  Credit,
+  Ellipsoid,
+  Math,
+  OrientedBoundingBox,
+  QuantizedMeshTerrainData,
+  Rectangle,
+  TerrainProvider,
+  TilingScheme,
+  WebMercatorTilingScheme,
+} from 'cesium';
+import decode from '@here/quantized-mesh-decoder';
+import dummyTileBuffer from './dummy-quantized-mesh-tile';
+
+const TILE_IMAGE_WIDTH = 65;
+
+export interface IDecodedTileHeader {
+  centerX: number;
+  centerY: number;
+  centerZ: number;
+  minHeight: number;
+  maxHeight: number;
+  boundingSphereCenterX: number;
+  boundingSphereCenterY: number;
+  boundingSphereCenterZ: number;
+  boundingSphereRadius: number;
+  horizonOcclusionPointX: number;
+  horizonOcclusionPointY: number;
+  horizonOcclusionPointZ: number;
+}
+
+export interface IExtensions {
+  vertexNormals?: Uint8Array;
+  waterMask?: ArrayBufferLike;
+  metadata?: unknown;
+}
+
+export interface IDecodedTile {
+  header: IDecodedTileHeader;
+  vertexData: Uint16Array;
+  triangleIndices: Uint16Array | Uint32Array;
+  westIndices: number[];
+  northIndices: number[];
+  eastIndices: number[];
+  southIndices: number[];
+  extensions?: IExtensions;
+}
+
+export default class QuantizedMeshTerrainProvider /*extends TerrainProvider*/ {
+  public tilingScheme: TilingScheme;
+  public ready: boolean;
+  public readyPromise: Promise<boolean>;
+  private readonly dummyTile: IDecodedTile;
+  private readonly getUrl: (x: number, y: number, level: number) => string;
+  private readonly credits: Credit[] | undefined;
+
+  public constructor(options: {
+    getUrl?: (x: number, y: number, level: number) => string;
+    credit?: string;
+    tilingScheme?: TilingScheme;
+  }) {
+    // super();
+    this.ready = false;
+    this.dummyTile = decode(dummyTileBuffer);
+    this.tilingScheme = options.tilingScheme ?? new WebMercatorTilingScheme();
+
+    if (options.getUrl === undefined) {
+      throw new Error('getUrl option is missing');
+    }
+
+    if (options.credit !== undefined) {
+      this.credits = [new Credit(options.credit)];
+    }
+
+    this.getUrl = options.getUrl;
+
+    this.readyPromise = Promise.resolve(true);
+    this.ready = true;
+  }
+
+  public requestTileGeometry(
+    x: number,
+    y: number,
+    level: number
+  ): Promise<void | QuantizedMeshTerrainData> | undefined {
+    const url = this.getUrl(x, y, level);
+
+    return window
+      .fetch(url)
+      .then((res: Response) => {
+        if (res.status !== 200) {
+          return this.generateDummyTile(x, y, level);
+        }
+        return this.decodeResponse(res, x, y, level);
+      })
+      .then((decodedTile: IDecodedTile) => {
+        return this.createQuantizedMeshData(decodedTile, x, y, level);
+      })
+      .catch((err: unknown) => {
+        console.error(err);
+      });
+  }
+
+  public getTileDataAvailable(x: number, y: number, level: number): boolean {
+    return true;
+  }
+
+  public getLevelMaximumGeometricError(level: number): number {
+    const levelZeroMaximumGeometricError = TerrainProvider.getEstimatedLevelZeroGeometricErrorForAHeightmap(
+      this.tilingScheme.ellipsoid,
+      TILE_IMAGE_WIDTH,
+      this.tilingScheme.getNumberOfXTilesAtLevel(0)
+    );
+
+    return levelZeroMaximumGeometricError / (1 << level);
+  }
+
+  private generateDummyTileHeader(
+    x: number,
+    y: number,
+    level: number
+  ): IDecodedTileHeader {
+    const tileRect = this.tilingScheme.tileXYToRectangle(x, y, level);
+    const tileNativeRect = this.tilingScheme.tileXYToNativeRectangle(
+      x,
+      y,
+      level
+    );
+    const tileCenter = Cartographic.toCartesian(Rectangle.center(tileRect));
+    const horizonOcclusionPoint = Ellipsoid.WGS84.transformPositionToScaledSpace(
+      tileCenter
+    );
+
+    return {
+      centerX: tileCenter.x,
+      centerY: tileCenter.y,
+      centerZ: tileCenter.z,
+      minHeight: 0,
+      maxHeight: 0,
+      boundingSphereCenterX: tileCenter.x,
+      boundingSphereCenterY: tileCenter.y,
+      boundingSphereCenterZ: tileCenter.z,
+      boundingSphereRadius: tileNativeRect.height,
+      horizonOcclusionPointX: horizonOcclusionPoint.x,
+      horizonOcclusionPointY: horizonOcclusionPoint.y,
+      horizonOcclusionPointZ: horizonOcclusionPoint.z,
+    };
+  }
+
+  private createQuantizedMeshData(
+    decodedTile: IDecodedTile,
+    x: number,
+    y: number,
+    level: number
+  ): QuantizedMeshTerrainData {
+    const tileRect = this.tilingScheme.tileXYToRectangle(x, y, level);
+    const boundingSphereCenter = new Cartesian3(
+      decodedTile.header.boundingSphereCenterX,
+      decodedTile.header.boundingSphereCenterY,
+      decodedTile.header.boundingSphereCenterZ
+    );
+    const boundingSphere = new BoundingSphere(
+      boundingSphereCenter,
+      decodedTile.header.boundingSphereRadius
+    );
+    const horizonOcclusionPoint = new Cartesian3(
+      decodedTile.header.horizonOcclusionPointX,
+      decodedTile.header.horizonOcclusionPointY,
+      decodedTile.header.horizonOcclusionPointZ
+    );
+
+    let orientedBoundingBox;
+
+    if (tileRect.width < Math.PI_OVER_TWO + Math.EPSILON5) {
+      orientedBoundingBox = OrientedBoundingBox.fromRectangle(
+        tileRect,
+        decodedTile.header.minHeight,
+        decodedTile.header.maxHeight
+      );
+    }
+
+    return new QuantizedMeshTerrainData({
+      minimumHeight: decodedTile.header.minHeight,
+      maximumHeight: decodedTile.header.maxHeight,
+      quantizedVertices: decodedTile.vertexData,
+      indices: decodedTile.triangleIndices,
+      boundingSphere: boundingSphere,
+      orientedBoundingBox: orientedBoundingBox,
+      horizonOcclusionPoint: horizonOcclusionPoint,
+      westIndices: decodedTile.westIndices,
+      southIndices: decodedTile.southIndices,
+      eastIndices: decodedTile.eastIndices,
+      northIndices: decodedTile.northIndices,
+      westSkirtHeight: 100,
+      southSkirtHeight: 100,
+      eastSkirtHeight: 100,
+      northSkirtHeight: 100,
+      childTileMask: 15,
+      credits: this.credits,
+    });
+  }
+
+  private generateDummyTile(x: number, y: number, level: number): IDecodedTile {
+    return {
+      ...this.dummyTile,
+      ...this.generateDummyTileHeader(x, y, level),
+    };
+  }
+
+  private decodeResponse(
+    res: any,
+    x: number,
+    y: number,
+    level: number
+  ): IDecodedTile {
+    return res
+      .arrayBuffer()
+      .then((buffer: ArrayBufferLike) => {
+        return decode(buffer);
+      })
+      .catch((err: unknown) => {
+        console.error(`Decoding failed on tile ${this.getUrl(x, y, level)}`);
+        console.error(err);
+
+        return this.generateDummyTile(x, y, level);
+      });
+  }
+}