@vcmap/core 6.2.0-rc.1 → 6.2.0-rc.2

package/src/map/panoramaMap.ts

@@ -236,9 +236,12 @@ export default class PanoramaMap extends VcsMap {
 
     if (closestImage) {
       if (viewpoint.heading != null) {
-        this._cesiumWidget.camera.setView({
+        const { camera } = this._cesiumWidget;
+        camera.setView({
           orientation: {
             heading: CesiumMath.toRadians(viewpoint.heading),
+            pitch: camera.pitch,
+            roll: camera.roll,
           },
         });
       }
@@ -318,7 +321,9 @@ export default class PanoramaMap extends VcsMap {
    */
   setCurrentImage(image?: PanoramaImage): void {
     if (this._currentImage !== image) {
+      const currentImage = this._currentImage;
       this._currentImage = image;
+      currentImage?.destroy();
       this.currentImageChanged.raiseEvent(image);
     }
   }

package/src/panorama/panoramaImageView.ts

@@ -1,4 +1,4 @@
-import type { Camera } from '@vcmap-cesium/engine';
+import type { Camera, Primitive } from '@vcmap-cesium/engine';
 import { Cartesian2, Matrix4, Cartesian3 } from '@vcmap-cesium/engine';
 import { getWidth } from 'ol/extent.js';
 import type { Size } from 'ol/size.js';
@@ -164,16 +164,13 @@ function setupDepthHandling(
 
 /**
  * The image wrapper is responsible for managing the panorama image tiles and rendering them.
- * @param image
- * @param primitiveCollection
- * @param camera
- * @param canvas
  */
 function createImageWrapper(
   image: PanoramaImage,
   primitiveCollection: PanoramaTilePrimitiveCollection,
   camera: Camera,
   canvas: HTMLCanvasElement,
+  map: PanoramaMap,
 ): ImageWrapper {
   const { tileSize, maxLevel, minLevel, hasDepth } = image;
   const baseTileCoordinates = createMinLevelTiles(minLevel);
@@ -181,7 +178,7 @@ function createImageWrapper(
     ? setupDepthHandling(image, primitiveCollection, camera, canvas)
     : (): void => {};
 
-  const currentTiles = new Map<string, PanoramaTile>();
+  const currentTiles = new Map<string, Primitive>();
   let currentLevel = minLevel;
   let currentTileCoordinates: PanoramaTileCoordinate[] = [
     ...baseTileCoordinates,
@@ -193,14 +190,15 @@ function createImageWrapper(
       .createVisibleTiles(currentTileCoordinates)
       .forEach((tile) => {
         if (!currentTiles.has(tile.tileCoordinate.key)) {
+          const primitive = tile.getPrimitive(map);
           if (
             tile.tileCoordinate.level === minLevel &&
             !(tile as PanoramaTile & { [baseLevelScaled]?: boolean })[
               baseLevelScaled
             ]
           ) {
-            tile.primitive.modelMatrix = Matrix4.multiplyByScale(
-              tile.primitive.modelMatrix,
+            primitive.modelMatrix = Matrix4.multiplyByScale(
+              primitive.modelMatrix,
               new Cartesian3(1.01, 1.01, 1.01),
               new Matrix4(),
             );
@@ -209,8 +207,8 @@ function createImageWrapper(
             ] = true;
           }
 
-          currentTiles.set(tile.tileCoordinate.key, tile);
-          primitiveCollection.add(tile.primitive);
+          currentTiles.set(tile.tileCoordinate.key, primitive);
+          primitiveCollection.add(primitive);
         }
       });
   };
@@ -290,12 +288,10 @@ function createImageWrapper(
 
     // push base tile coordinates onto the back of the array, so they are always loaded first.
     currentTileCoordinates.push(...baseTileCoordinates);
-    currentTiles.forEach((tile) => {
-      if (
-        !currentTileCoordinates.find((c) => c.key === tile.tileCoordinate.key)
-      ) {
-        primitiveCollection.remove(tile.primitive);
-        currentTiles.delete(tile.tileCoordinate.key);
+    currentTiles.forEach((primitive, key) => {
+      if (!currentTileCoordinates.find((c) => c.key === key)) {
+        primitiveCollection.remove(primitive);
+        currentTiles.delete(key);
       }
     });
 
@@ -313,8 +309,8 @@ function createImageWrapper(
     },
     render,
     destroy(): void {
-      currentTiles.forEach((tile) => {
-        primitiveCollection.remove(tile.primitive);
+      currentTiles.forEach((primitive) => {
+        primitiveCollection.remove(primitive);
       });
       currentTiles.clear();
       showIntensityListener();
@@ -400,6 +396,7 @@ export function createPanoramaImageView(map: PanoramaMap): PanoramaImageView {
         primitiveCollection,
         scene.camera,
         scene.canvas,
+        map,
       );
       currentView.suspendTileLoading = suspendTileLoading;
     } else {

package/src/panorama/panoramaTile.ts

@@ -1,4 +1,3 @@
-import type { Matrix4 } from '@vcmap-cesium/engine';
 import {
   Cartesian3,
   EllipsoidGeometry,
@@ -6,16 +5,28 @@ import {
   MaterialAppearance,
   Primitive,
   VertexFormat,
+  type Matrix4,
 } from '@vcmap-cesium/engine';
 import type { Size } from 'ol/size.js';
 import PanoramaTileMaterial from './panoramaTileMaterial.js';
 import type { PanoramaTileCoordinate } from './panoramaTileCoordinate.js';
 import { tileSizeInRadians } from './panoramaTileCoordinate.js';
+import type PanoramaMap from '../map/panoramaMap.js';
+import type {
+  PanoramaResourceData,
+  PanoramaResourceType,
+} from './panoramaTileProvider.js';
 
 export type PanoramaTile = {
-  readonly primitive: Primitive;
+  hasResource(type: PanoramaResourceType): boolean;
+  setResource<T extends PanoramaResourceType>(
+    type: T,
+    resource: PanoramaResourceData<T>,
+  ): void;
+  getDepthAtPixel(x: number, y: number): number | undefined;
   readonly tileCoordinate: PanoramaTileCoordinate;
-  readonly material: PanoramaTileMaterial;
+  getPrimitive(map: PanoramaMap): Primitive;
+  getMaterial(map: PanoramaMap): PanoramaTileMaterial | undefined;
   destroy(): void;
 };
 
@@ -64,26 +75,80 @@ export function createPanoramaTile(
   modelMatrix: Matrix4,
   tileSize: Size,
 ): PanoramaTile {
-  const material = new PanoramaTileMaterial(tileCoordinate, tileSize);
-  const primitive = createPanoramaTilePrimitive(
-    tileCoordinate,
-    modelMatrix,
-    material,
-  );
+  let destroyed = false;
+  const primitives = new Map<
+    PanoramaMap,
+    { primitive: Primitive; material: PanoramaTileMaterial }
+  >();
+
+  let resources: { [K in PanoramaResourceType]?: PanoramaResourceData<K> } = {};
 
   return {
-    get primitive(): Primitive {
-      return primitive;
-    },
     get tileCoordinate(): PanoramaTileCoordinate {
       return tileCoordinate;
     },
-    get material(): PanoramaTileMaterial {
-      return material;
+    hasResource(type: PanoramaResourceType): boolean {
+      return resources[type] != null;
+    },
+    setResource<T extends PanoramaResourceType>(
+      type: T,
+      resource: PanoramaResourceData<T>,
+    ): void {
+      if (this.hasResource(type)) {
+        throw new Error(
+          `Resource of type "${type}" already set for this tile. Cannot overwrite.`,
+        );
+      }
+      resources[type] = resource as ImageBitmap & Float32Array;
+      primitives.forEach(({ material }) => {
+        material.setTexture(type, resource);
+      });
+    },
+    getPrimitive(map: PanoramaMap): Primitive {
+      if (destroyed) {
+        throw new Error('Cannot get primitive from destroyed panorama tile.');
+      }
+      if (primitives.has(map)) {
+        return primitives.get(map)!.primitive;
+      }
+      const material = new PanoramaTileMaterial(tileCoordinate, tileSize);
+      Object.entries(resources).forEach(([type, resource]) => {
+        material.setTexture(type as PanoramaResourceType, resource);
+      });
+      const primitive = createPanoramaTilePrimitive(
+        tileCoordinate,
+        modelMatrix,
+        material,
+      );
+      primitives.set(map, { primitive, material });
+      return primitive;
+    },
+    getMaterial(map: PanoramaMap): PanoramaTileMaterial | undefined {
+      if (primitives.has(map)) {
+        return primitives.get(map)!.material;
+      }
+      return undefined;
+    },
+    /**
+     * Returns the normalized depth value [0, 1] at the given pixel coordinates in the panorama tile.
+     * @param x
+     * @param y
+     */
+    getDepthAtPixel(x: number, y: number): number | undefined {
+      if (!resources.depth) {
+        return undefined;
+      }
+
+      const index = y * tileSize[0] + x;
+      return resources.depth[index];
     },
     destroy(): void {
-      primitive.destroy();
-      material.destroy();
+      destroyed = true;
+      resources = {};
+      primitives.forEach(({ primitive, material }) => {
+        primitive.destroy();
+        material.destroy();
+      });
     },
   };
 }

package/src/panorama/panoramaTileMaterial.ts

@@ -258,20 +258,6 @@ export default class PanoramaTileMaterial extends Material {
     return this.uniforms[uniform] !== Material.DefaultImageId;
   }
 
-  /**
-   * Returns the normalized depth value [0, 1] at the given pixel coordinates in the panorama tile.
-   * @param x
-   * @param y
-   */
-  getDepthAtPixel(x: number, y: number): number | undefined {
-    if (!this._depthData) {
-      return undefined;
-    }
-
-    const index = y * this._tileSize[0] + x;
-    return this._depthData[index];
-  }
-
   /**
    * Internal cesium API to update the material.
    * @param context

package/src/panorama/panoramaTileProvider.ts

@@ -168,7 +168,7 @@ function createPanoramaResourceProvider(
   ): Promise<void> => {
     const { tile, resource } = request;
     const { type } = resource;
-    if (!tile.material.hasTexture(type)) {
+    if (!tile.hasResource(type)) {
       const { levelImages } = resource;
       const { tileCoordinate } = tile;
       const levelImage = levelImages[tileCoordinate.level - minLevel];
@@ -181,7 +181,7 @@ function createPanoramaResourceProvider(
             poolOrDecoder,
           );
 
-          tile.material.setTexture(
+          tile.setResource(
             type,
             resourceData.data as unknown as PanoramaResourceData<PanoramaResourceType>,
           );
@@ -257,17 +257,14 @@ function createPanoramaResourceProvider(
   const createOrUpdateQueue = (panoramaTile: PanoramaTile[]): void => {
     const newResources = panoramaTile.flatMap((tile) => {
       const resourceRequests: TileResourceRequest<PanoramaResourceType>[] = [];
-      if (!tile.material.hasTexture('rgb') && !loadingTiles.get(tile)?.rgb) {
+      if (!tile.hasResource('rgb') && !loadingTiles.get(tile)?.rgb) {
         resourceRequests.push({
           tile,
           resource: resources.rgb,
         });
       }
       if (resources.depth) {
-        if (
-          !tile.material.hasTexture('depth') &&
-          !loadingTiles.get(tile)?.depth
-        ) {
+        if (!tile.hasResource('depth') && !loadingTiles.get(tile)?.depth) {
           resourceRequests.push({
             tile,
             resource: resources.depth,
@@ -276,7 +273,7 @@ function createPanoramaResourceProvider(
       }
       if (showIntensity && resources.intensity) {
         if (
-          !tile.material.hasTexture('intensity') &&
+          !tile.hasResource('intensity') &&
           !loadingTiles.get(tile)?.intensity
         ) {
           resourceRequests.push({
@@ -329,7 +326,7 @@ function createPanoramaResourceProvider(
         throw new Error(`Resource type ${type} not found`);
       }
 
-      if (tile.material.hasTexture(type)) {
+      if (tile.hasResource(type)) {
         return Promise.resolve();
       }
 
@@ -447,7 +444,7 @@ export function createPanoramaTileProvider(
     const x = tileSize[0] - Math.floor((offsetX / width) * tileSize[0]);
     const y = Math.floor((offsetY / height) * tileSize[1]);
 
-    const depthValue = tile.material.getDepthAtPixel(x, y);
+    const depthValue = tile.getDepthAtPixel(x, y);
     if (depthValue) {
       return interpolateDepth(
         depthValue,

package/src/util/flight/flightRecorder.ts

@@ -0,0 +1,234 @@
+import type VcsApp from '../../vcsApp.js';
+import type Layer from '../../layer/layer.js';
+import CesiumMap from '../../map/cesiumMap.js';
+import CesiumTilesetLayer from '../../layer/cesiumTilesetLayer.js';
+import { type FlightPlayer } from './flightPlayer.js';
+
+export type FlightPathRecorderOptions = {
+  fps?: number;
+  highDefinition?: boolean;
+};
+
+async function getFlightFrames(
+  app: VcsApp,
+  player: FlightPlayer,
+  fps: number,
+  cancelToken: { cancelled: boolean },
+  maxNumberOfFrames = 100,
+): Promise<ImageBitmap[]> {
+  const scene = (app.maps.activeMap as CesiumMap).getScene()!;
+  const { canvas, globe } = scene;
+  let recordedTime = player.clock.currentTime - 1;
+  let numberOfFrames = Math.ceil(
+    (player.clock.endTime - player.clock.currentTime) * fps,
+  );
+  if (numberOfFrames > maxNumberOfFrames) {
+    numberOfFrames = maxNumberOfFrames;
+  }
+  const images = new Array<Promise<ImageBitmap>>(numberOfFrames);
+  const tilesetImpl = [...app.layers]
+    .filter(
+      (l: Layer): l is CesiumTilesetLayer =>
+        l instanceof CesiumTilesetLayer && l.active,
+    )
+    .flatMap((tileset) =>
+      tileset.getImplementationsForMap(app.maps.activeMap!),
+    );
+
+  const layerListeners = [
+    app.layers.stateChanged.addEventListener((layer) => {
+      if (layer instanceof CesiumTilesetLayer) {
+        const implementations = layer.getImplementationsForMap(
+          app.maps.activeMap!,
+        );
+        if (layer.active) {
+          tilesetImpl.push(...implementations);
+        } else {
+          implementations.forEach((impl) => {
+            tilesetImpl.splice(
+              tilesetImpl.findIndex((i) => i === impl),
+              1,
+            );
+          });
+        }
+      }
+    }),
+  ];
+
+  let currentFrame = 0;
+  await new Promise<void>((resolve) => {
+    const handler = scene.postRender.addEventListener(() => {
+      if (cancelToken.cancelled) {
+        handler();
+        return;
+      }
+
+      if (globe.tilesLoaded) {
+        if (tilesetImpl.some((impl) => !impl.cesium3DTileset?.tilesLoaded)) {
+          return;
+        }
+        if (player.clock.currentTime === recordedTime) {
+          return;
+        }
+
+        recordedTime = player.clock.currentTime;
+        images[currentFrame] = createImageBitmap(canvas);
+        if (player.clock.currentTime === player.clock.endTime) {
+          handler();
+          resolve();
+        }
+
+        let nextTick = player.clock.currentTime + 1 / fps;
+        if (nextTick >= player.clock.endTime) {
+          nextTick = player.clock.endTime;
+        }
+        player.goToTime(nextTick);
+        currentFrame += 1;
+        if (currentFrame >= numberOfFrames) {
+          handler();
+          resolve();
+        }
+      }
+    });
+  });
+
+  layerListeners.forEach((listener) => {
+    listener();
+  });
+
+  return Promise.all(images);
+}
+
+export function createFlightMovie(
+  app: VcsApp,
+  player: FlightPlayer,
+  options?: FlightPathRecorderOptions,
+): { start: () => Promise<Blob>; cancel: () => void } {
+  if (!(app.maps.activeMap instanceof CesiumMap)) {
+    throw new Error('No active Cesium map found');
+  }
+
+  const cancelToken = { cancelled: false };
+  const videoBitsPerSecond = options?.highDefinition ? 12000000 : 6000000;
+
+  const map = app.maps.activeMap;
+  const scene = map.getScene()!;
+  const { canvas } = scene;
+
+  const destinationCanvas = document.createElement('canvas');
+  destinationCanvas.width = canvas.width;
+  destinationCanvas.height = canvas.height;
+  const context = destinationCanvas.getContext('2d')!;
+
+  const stream = destinationCanvas.captureStream(options?.fps ?? 30);
+  const recorder = new MediaRecorder(stream, {
+    mimeType: 'video/webm',
+    videoBitsPerSecond,
+  });
+
+  const resetMapControls = app.maps.requestExclusiveMapControls(
+    { apiCalls: true, keyEvents: true, pointerEvents: true },
+    () => {},
+  );
+
+  const finished = new Promise<Blob>((resolve, reject) => {
+    const chunksBuffer: Blob[] = [];
+
+    recorder.ondataavailable = (event): void => {
+      if (event.data.size > 0) {
+        chunksBuffer.push(event.data);
+      }
+    };
+
+    recorder.onerror = reject;
+    recorder.onstop = (): void => {
+      resolve(new Blob(chunksBuffer, { type: 'video/webm' }));
+    };
+  });
+
+  const renderBuffer = (buffer: ImageBitmap[]): Promise<void> => {
+    let interval: ReturnType<typeof setInterval>;
+    const promise = new Promise<void>((resolve) => {
+      const frameDuration = 1000 / (options?.fps || 30);
+      let currentFrame = 0;
+      interval = setInterval(() => {
+        if (cancelToken.cancelled) {
+          resolve();
+        }
+        const image = buffer[currentFrame];
+        if (image) {
+          context.drawImage(image, 0, 0);
+          currentFrame += 1;
+          if (currentFrame >= buffer.length) {
+            resolve();
+          }
+        } else {
+          resolve();
+        }
+      }, frameDuration);
+    });
+
+    return promise
+      .then(() => {
+        clearInterval(interval);
+      })
+      .catch((err: unknown) => {
+        clearInterval(interval);
+        throw err;
+      });
+  };
+
+  const requestBuffer = async (): Promise<boolean> => {
+    const images = await getFlightFrames(
+      app,
+      player,
+      options?.fps ?? 30,
+      cancelToken,
+    );
+
+    map.getCesiumWidget()!.useDefaultRenderLoop = false;
+    if (recorder.state === 'paused') {
+      recorder.resume();
+    } else {
+      recorder.start();
+    }
+
+    await renderBuffer(images);
+    map.getCesiumWidget()!.useDefaultRenderLoop = true;
+    if (
+      player.clock.currentTime === player.clock.endTime ||
+      cancelToken.cancelled
+    ) {
+      return false;
+    }
+    recorder.pause();
+    recorder.requestData();
+    return true;
+  };
+
+  const reset = (): void => {
+    map.getCesiumWidget()!.useDefaultRenderLoop = true;
+    resetMapControls?.();
+  };
+
+  async function start(): Promise<Blob> {
+    let buffering = true;
+    while (buffering) {
+      // eslint-disable-next-line no-await-in-loop
+      buffering = await requestBuffer();
+    }
+    stream.getTracks().forEach((track) => {
+      track.stop();
+    });
+    reset();
+    return finished;
+  }
+
+  const cancel = (): void => {
+    cancelToken.cancelled = true;
+    reset();
+    recorder.stop();
+  };
+
+  return { start, cancel };
+}

package/src/util/math.ts

@@ -2,9 +2,11 @@ import {
   Math as CesiumMath,
   Cartesian3,
   Cartographic,
+  Rectangle,
 } from '@vcmap-cesium/engine';
 import type { Coordinate } from 'ol/coordinate.js';
 import { getDistance as haversineDistance } from 'ol/sphere.js';
+import { type Extent, getBottomLeft, getTopRight } from 'ol/extent.js';
 import Projection from './projection.js';
 
 /**
@@ -177,6 +179,38 @@ export function cartesianToMercator(cartesian: Cartesian3): Coordinate {
   return Projection.wgs84ToMercator(wgs84);
 }
 
+export function mercatorExtentToRectangle(
+  extent: Extent,
+  result?: Rectangle,
+): Rectangle {
+  const bottomLeft = getBottomLeft(extent);
+  const topRight = getTopRight(extent);
+
+  Projection.mercatorToWgs84(bottomLeft, true);
+  Projection.mercatorToWgs84(topRight, true);
+
+  return Rectangle.fromDegrees(
+    bottomLeft[0],
+    bottomLeft[1],
+    topRight[0],
+    topRight[1],
+    result,
+  );
+}
+
+export function rectangleToMercatorExtent(rectangle: Rectangle): Extent {
+  const bottomLeft = Projection.wgs84ToMercator([
+    CesiumMath.toDegrees(rectangle.west),
+    CesiumMath.toDegrees(rectangle.south),
+  ]);
+  const topRight = Projection.wgs84ToMercator([
+    CesiumMath.toDegrees(rectangle.east),
+    CesiumMath.toDegrees(rectangle.north),
+  ]);
+
+  return [bottomLeft[0], bottomLeft[1], topRight[0], topRight[1]];
+}
+
 export function getMidPoint(p1: Coordinate, p2: Coordinate): Coordinate {
   const stride = p1.length;
   const output = new Array<number>(stride);

package/dist/src/panorama/panoramaImageCache.d.ts

@@ -1,8 +0,0 @@
-import LRUCache from 'ol/structs/LRUCache.js';
-import type { PanoramaImage } from './panoramaImage.js';
-/**
- * A specialized LRU cache
- */
-export declare class PanoramaImageCache extends LRUCache<Promise<PanoramaImage>> {
-    deleteOldest(): void;
-}

package/dist/src/panorama/panoramaImageCache.js

@@ -1,18 +0,0 @@
-import LRUCache from 'ol/structs/LRUCache.js';
-/**
- * A specialized LRU cache
- */
-export class PanoramaImageCache extends LRUCache {
-    deleteOldest() {
-        const entry = this.pop();
-        // eslint-disable-next-line @typescript-eslint/no-misused-promises
-        if (entry) {
-            entry
-                .then((image) => {
-                image.destroy();
-            })
-                .catch(() => { });
-        }
-    }
-}
-//# sourceMappingURL=panoramaImageCache.js.map

package/dist/src/panorama/panoramaImageCache.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"panoramaImageCache.js","sourceRoot":"","sources":["../../../src/panorama/panoramaImageCache.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,wBAAwB,CAAC;AAG9C;;GAEG;AACH,MAAM,OAAO,kBAAmB,SAAQ,QAAgC;IACtE,YAAY;QACV,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACzB,kEAAkE;QAClE,IAAI,KAAK,EAAE,CAAC;YACV,KAAK;iBACF,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE;gBACd,KAAK,CAAC,OAAO,EAAE,CAAC;YAClB,CAAC,CAAC;iBACD,KAAK,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;QACrB,CAAC;IACH,CAAC;CACF"}

package/src/panorama/panoramaImageCache.ts

@@ -1,19 +0,0 @@
-import LRUCache from 'ol/structs/LRUCache.js';
-import type { PanoramaImage } from './panoramaImage.js';
-
-/**
- * A specialized LRU cache
- */
-export class PanoramaImageCache extends LRUCache<Promise<PanoramaImage>> {
-  deleteOldest(): void {
-    const entry = this.pop();
-    // eslint-disable-next-line @typescript-eslint/no-misused-promises
-    if (entry) {
-      entry
-        .then((image) => {
-          image.destroy();
-        })
-        .catch(() => {});
-    }
-  }
-}