第7章: ラスタータイルレイヤー

RasterTileLayer
  |
  +-- selectVisibleTiles()  <- tile-tree.ts（第6章）
  |     | 必要なタイルの一覧
  +-- 差分更新ロジック
  |     +-- 追加すべきタイル --> loadTile()
  |     +-- 削除すべきタイル --> removeTile()
  +-- TileTextureLoader    <- tile-loader.ts
  |     +-- LRUキャッシュ
  |     +-- 同時リクエスト制限
  |     +-- キャンセル機構
  +-- createTileMesh()      <- tile-mesh.ts
        | THREE.Mesh
      group.add(mesh)

const viewer = new GlobeViewer({
  canvas: canvasEl,
  layers: [
    new RasterTileLayer()
  ]
});
viewer.start();

// クリーンアップ時
viewer.dispose();

export class TileTextureLoader {
  private readonly loader = new THREE.TextureLoader();
  private readonly cache = new Map<string, THREE.Texture>();
  private readonly accessOrder: string[] = [];
  private activeRequests = 0;
  private readonly queue: Array<{ ... }> = [];
  private readonly orphaned = new Map<string, THREE.Texture>();
  private readonly cancelled = new Set<string>();

  constructor(
    private readonly urlGenerator = osmTileUrl,
    private readonly maxConcurrent = 6,
    private readonly maxCacheSize = 256
  ) {}
}

load(z: number, x: number, y: number): Promise<THREE.Texture> {
  const key = `${z}/${x}/${y}`;

  // キャッシュヒット
  const cached = this.cache.get(key);
  if (cached) {
    this.touchCache(key);  // アクセス順を更新
    return Promise.resolve(cached);
  }

  const url = this.urlGenerator(z, x, y);

  return new Promise((resolve, reject) => {
    this.queue.push({ key, url, resolve, reject });
    this.processQueue();
  });
}

private touchCache(key: string): void {
  const idx = this.accessOrder.indexOf(key);
  if (idx !== -1) {
    this.accessOrder.splice(idx, 1);
    this.accessOrder.push(key); // 末尾に移動 = 最新
  }
}

private evict(): void {
  while (this.cache.size > this.maxCacheSize) {
    const oldKey = this.accessOrder.shift(); // 先頭 = 最古
    if (oldKey) {
      const tex = this.cache.get(oldKey);
      if (tex) {
        this.cache.delete(oldKey);
        this.orphaned.set(oldKey, tex); // まだメッシュが使っている可能性
      }
    }
  }
}

1. タイルAのテクスチャがLRUキャッシュにある
2. キャッシュが満杯になり、タイルAのテクスチャがevictされる
3. しかし、タイルAのMeshはまだsceneに表示されている
4. MeshのmaterialがこのテクスチャをGPUで参照している
--> ここでdisposeすると、表示中のタイルが黒くなる

private processQueue(): void {
  while (this.activeRequests < this.maxConcurrent
         && this.queue.length > 0) {
    const item = this.queue.shift()!;

    // キューに入っている間にキャッシュされた場合
    const cached = this.cache.get(item.key);
    if (cached) {
      this.touchCache(item.key);
      item.resolve(cached);
      continue;
    }

    this.activeRequests++;
    this.loader.load(
      item.url,
      (texture) => {
        this.activeRequests--;

        // キャンセル済みならdispose
        if (this.cancelled.has(item.key)) {
          this.cancelled.delete(item.key);
          texture.dispose();
          this.processQueue();
          return;
        }

        texture.colorSpace = THREE.SRGBColorSpace;
        this.addToCache(item.key, texture);
        item.resolve(texture);
        this.processQueue();
      },
      undefined,
      (err) => {
        this.activeRequests--;
        item.reject(err);
        this.processQueue();
      }
    );
  }
}

cancel(key: string): void {
  // キューから除去
  const idx = this.queue.findIndex((item) => item.key === key);
  if (idx !== -1) {
    this.queue.splice(idx, 1);
    return;
  }
  // 進行中のロードにはキャンセルフラグを設定
  this.cancelled.add(key);
}

export function cameraMatrixChanged(
  camera: THREE.PerspectiveCamera,
  lastCameraMatrix: Float32Array
): boolean {
  const current = camera.matrixWorldInverse.elements;
  for (let i = 0; i < 16; i++) {
    if (lastCameraMatrix[i] !== current[i]) {
      lastCameraMatrix.set(current);
      return true;
    }
  }
  return false;
}

export function buildTileSyncPlan(
  params: BuildTileSyncPlanParams
): TileSyncPlan {
  const neededKeys = new Set(
    params.needed.map((tile) => tileKey(tile.x, tile.y, tile.z))
  );

  // 前フレームと同じなら差分なし
  if (setsEqual(neededKeys, params.previousKeys)) {
    return { changed: false, ... };
  }

  // 追加: neededだがactive/pendingでないタイル（低ズーム優先）
  const toAdd = params.needed.filter(...)
  toAdd.sort((a, b) => a.z - b.z);

  // 削除: activeだがneededでなく、子がpendingでないもの
  const toRemove: string[] = [];

  // キャンセル: pendingだがneededでないもの
  const toCancel: string[] = [];

  return { changed: true, neededKeys, toAdd, toRemove, toCancel };
}

export function hasChildrenPending(
  parentKeyStr: string,
  neededKeys: Set<string>,
  isTileActive: (key: string) => boolean
): boolean {
  const { x, y, z } = parseTileKey(parentKeyStr);
  const childKeys = [
    tileKey(x*2,   y*2,   z+1),
    tileKey(x*2+1, y*2,   z+1),
    tileKey(x*2,   y*2+1, z+1),
    tileKey(x*2+1, y*2+1, z+1)
  ];

  for (const ck of childKeys) {
    if (neededKeys.has(ck) && !isTileActive(ck)) {
      return true;  // 必要な子がまだアクティブでない
    }
  }
  return false;
}

フレーム1: 親タイル(1,0,1)表示中
フレーム2: ズームイン
  --> 子タイル(2,0,2),(3,0,2),(2,1,2),(3,1,2)が必要
  --> 子をロード開始、親は保持
フレーム3: (2,0,2)ロード完了
  --> 親はまだ保持（他の子がpending）
フレーム4: 全子ロード完了
  --> 親を削除

https://tile.openstreetmap.org/{z}/{x}/{y}.png

private removeTile(key: string): void {
  const mesh = this.activeMeshes.get(key);
  if (mesh) {
    this.group.remove(mesh);
    mesh.geometry.dispose();       // 頂点バッファ解放
    (mesh.material as THREE.Material).dispose(); // シェーダ解放
    this.activeMeshes.delete(key);
    this.loader.release(z, x, y);   // キャッシュ外テクスチャ解放
  }
}

tileKey(10, 20, 5)     // --> "5/10/20"  (z/x/y形式)
parseTileKey("5/10/20") // --> { x: 10, y: 20, z: 5 }
parentKey(10, 20, 5)    // --> "4/5/10"  (座標を2で割り、zを1下げる)
parentKey(0, 0, 0)       // --> null  (ルートに親はない)