astro-viewer 3.0.0 → 3.2.0

package/lib-esm/model/earth/XYZMap.js

@@ -0,0 +1,208 @@
+/*
+ * AstroViewer
+ * Copyright (C) Fabrizio Giordano
+ * SPDX-License-Identifier: LicenseRef-AstroViewer-Dual-License
+ *
+ * This file is part of AstroViewer.
+ * AstroViewer is distributed under a dual-license model.
+ * Commercial use requires a separate commercial license.
+ * Non-commercial use is governed by LICENSE-NONCOMMERCIAL.md.
+ *
+ * See LICENSE.md, LICENSE-COMMERCIAL.md, and LICENSE-NONCOMMERCIAL.md for details.
+ */
+import { AbstractSkyEntity } from "../AbstractSkyEntity.js";
+import { XYZVisibleTilesManager } from "./XYZVisibleTilesManager.js";
+import { xyzFovHelper } from "./XYZFoVHelper.js";
+import { ColorMaps } from "../ColorMaps.js";
+import { LatLonGrid } from "../grid/LonLatGrid.js";
+import { XYZShaderProgram } from "../../shader/XYZShaderProgram.js";
+import { XYZTileBuffer } from "./XYZTileBuffer.js";
+import { XYZAnchestorTile } from "./XYZAnchestorTile.js";
+import { XYZMeshBuilder } from "./XYZMeshBuilder.js";
+export class XYZMap extends AbstractSkyEntity {
+    _xyzShaderProgram;
+    _descriptor;
+    _visibleTilesManager;
+    _tileBuffer;
+    _meshBuilder;
+    _baseurl;
+    _zoom;
+    _latLonGrid;
+    _colorMapIdx = 0;
+    _colorMap = ColorMaps['native'];
+    constructor(radius, position, xrad, yrad, descriptor, webgl) {
+        super(radius, position, xrad, yrad, descriptor.name, webgl, false);
+        this._descriptor = descriptor;
+        this._xyzShaderProgram = new XYZShaderProgram(webgl);
+        this._meshBuilder = new XYZMeshBuilder();
+        this._tileBuffer = new XYZTileBuffer(1);
+        this.initGL(webgl);
+        this._latLonGrid = new LatLonGrid(radius, position, xrad, yrad, 'LatLonGrid', this._webgl);
+        this._visibleTilesManager = new XYZVisibleTilesManager();
+        this._baseurl = descriptor.url;
+        this.initShaders();
+        const fov = 180;
+        this._zoom = xyzFovHelper.getZoom(fov);
+    }
+    changeColorMap(colorMap) {
+        this._colorMap = colorMap;
+        switch (colorMap.name) {
+            case 'grayscale':
+                this._colorMapIdx = 1;
+                this._colorMap = ColorMaps['grayscale'];
+                break;
+            case 'planck':
+                this._colorMapIdx = 2;
+                this._colorMap = ColorMaps['planck'];
+                break;
+            case 'cmb':
+                this._colorMapIdx = 3;
+                this._colorMap = ColorMaps['cmb'];
+                break;
+            case 'rainbow':
+                this._colorMapIdx = 4;
+                this._colorMap = ColorMaps['rainbow'];
+                break;
+            case 'eosb':
+                this._colorMapIdx = 5;
+                this._colorMap = ColorMaps['eosb'];
+                break;
+            case 'cubehelix':
+                this._colorMapIdx = 6;
+                this._colorMap = ColorMaps['cubehelix'];
+                break;
+            case 'hot':
+                this._colorMapIdx = 7;
+                this._colorMap = ColorMaps['hot'];
+                break;
+            case 'gray':
+                this._colorMapIdx = 8;
+                this._colorMap = ColorMaps['gray'];
+                break;
+            case 'native':
+                this._colorMapIdx = 0;
+                this._colorMap = ColorMaps['native'];
+                break;
+            default:
+                this._colorMapIdx = 9;
+                this._colorMap = colorMap;
+        }
+    }
+    initShaders() {
+        this._xyzShaderProgram.enableProgram();
+    }
+    isLonLatGridVisible() {
+        return this._latLonGrid.isVisible();
+    }
+    toggleLonLatGrid() {
+        return this._latLonGrid.toggleShowGrid();
+    }
+    getFoV() {
+        return this._latLonGrid.getFoV();
+    }
+    refresh(input) {
+        const fov = this._latLonGrid.refreshFoV(input);
+        // this._zoom = this.resolveVisibleZoom(fov)
+        this._zoom = xyzFovHelper.getZoom(fov);
+    }
+    draw(input) {
+        const vMatrix = input.camera.getCameraMatrix();
+        if (!vMatrix)
+            return;
+        const pMatrix = input.pMatrix;
+        if (!pMatrix)
+            return;
+        this.refresh(input);
+        const mMatrix = this.getModelMatrix();
+        this._xyzShaderProgram.setRuntimeColorMap(this._colorMap);
+        const tileSelection = this._visibleTilesManager.computeVisibleTiles(this._zoom, this, this._webgl, input.camera, input.pMatrix);
+        const visibleTiles = tileSelection.visibleTiles;
+        const ancestorsMap = tileSelection.ancestorsMap;
+        const tileKeys = this._tileBuffer.ensureTiles(this.getTilesToEnsure(visibleTiles, ancestorsMap), (coord) => this.createTile(coord));
+        this._tileBuffer.evictCached(this._descriptor.maxCachedTiles);
+        for (const tileKey of tileKeys) {
+            const tile = this._tileBuffer.getActiveTile(tileKey);
+            if (!tile || tile.coord.z !== tileSelection.currentZoom) {
+                continue;
+            }
+            const drawn = tile.draw(pMatrix, vMatrix, mMatrix, this._colorMapIdx);
+            if (drawn) {
+                continue;
+            }
+            const ancestorTile = this.findBestAvailableAncestor(tile.coord);
+            ancestorTile?.draw(tileSelection.currentZoom, [tile.coord], ancestorsMap, pMatrix, vMatrix, mMatrix, this._colorMapIdx);
+        }
+        this._latLonGrid.draw(input);
+    }
+    createTile(coord) {
+        return new XYZAnchestorTile(coord, this.resolveTileUrl(coord), this._webgl, this._xyzShaderProgram, this._meshBuilder, this._descriptor.segmentsPerSide);
+    }
+    getTilesToEnsure(visibleTiles, ancestorsMap) {
+        const tilesByKey = new Map();
+        for (const tile of visibleTiles) {
+            tilesByKey.set(this.tileKey(tile), tile);
+        }
+        for (const ancestor of ancestorsMap.values()) {
+            tilesByKey.set(this.tileKey(ancestor), ancestor);
+        }
+        return Array.from(tilesByKey.values());
+    }
+    findBestAvailableAncestor(targetTile) {
+        for (let z = targetTile.z - 1; z >= 0; z--) {
+            const dz = targetTile.z - z;
+            const ancestorCoord = {
+                z,
+                x: targetTile.x >> dz,
+                y: targetTile.y >> dz,
+            };
+            const ancestorTile = this._tileBuffer.getAnyTile(this.tileKey(ancestorCoord));
+            if (ancestorTile?.ready) {
+                return ancestorTile;
+            }
+        }
+        return null;
+    }
+    resolveTileUrl(tile) {
+        const urlResolver = this._descriptor.urlResolver;
+        if (urlResolver) {
+            return urlResolver(tile);
+        }
+        const dim = 2 ** tile.z;
+        const y = this._descriptor.flipY ? dim - 1 - tile.y : tile.y;
+        const subdomains = this._descriptor.subdomains;
+        const subdomain = subdomains.length > 0
+            ? subdomains[Math.abs(tile.x + tile.y + tile.z) % subdomains.length]
+            : '';
+        return this._baseurl
+            .replace(/\{z\}/g, String(tile.z))
+            .replace(/\{x\}/g, String(tile.x))
+            .replace(/\{y\}/g, String(y))
+            .replace(/\{s\}/g, subdomain ?? '');
+    }
+    getDebugStats() {
+        const activeTiles = Array.from(this._tileBuffer.activeTiles.values(), (entry) => entry.tile);
+        const cachedTiles = Array.from(this._tileBuffer.cachedTiles.values(), (entry) => entry.tile);
+        const allTiles = [...activeTiles, ...cachedTiles];
+        const selection = this._visibleTilesManager.selection;
+        return {
+            cacheSize: this._tileBuffer.size,
+            visibleTileCount: selection.visibleTiles.length,
+            currentTileCount: activeTiles.filter((tile) => tile.coord.z === selection.currentZoom).length,
+            fallbackTileCount: selection.ancestorsMap.size,
+            coreTileCount: selection.visibleTiles.length,
+            coverageTileCount: selection.visibleTiles.length,
+            readyTileCount: allTiles.filter((tile) => tile.ready).length,
+            loadingTileCount: allTiles.filter((tile) => tile.loading).length,
+            coolingDownTileCount: 0,
+            currentZoom: selection.currentZoom,
+            tileSelectionKey: selection.key,
+            isSettling: false,
+            coarseTileCount: selection.ancestorsMap.size,
+            hasPendingSelection: false,
+            pendingSelectionKey: null,
+        };
+    }
+    tileKey(tile) {
+        return `${tile.z}/${tile.x}/${tile.y}`;
+    }
+}

package/lib-esm/model/earth/XYZMapDescriptor.d.ts

@@ -0,0 +1,29 @@
+import type { XYZTileCoord } from './XYZTypes.js';
+export declare class XYZMapDescriptor {
+    _name: string;
+    _url: string;
+    _urlResolver?: (tile: XYZTileCoord) => string;
+    _minZoom?: number;
+    _maxZoom?: number;
+    _segmentsPerSide?: number;
+    _tileSize?: number;
+    _maxCachedTiles?: number;
+    _interactionDebounceMs?: number;
+    _subdomains?: string[];
+    _attribution?: string;
+    _flipY?: boolean;
+    _maxConcurrentLoads?: number;
+    constructor(name: string, url: string, minZoom?: number, maxZoom?: number, segmentsPerSide?: number, maxCachedTiles?: number, maxConcurrentLoads?: number, urlResolver?: (tile: XYZTileCoord) => string);
+    get url(): string;
+    get urlResolver(): ((tile: XYZTileCoord) => string) | undefined;
+    get name(): string;
+    get minZoom(): number;
+    get maxZoom(): number;
+    get segmentsPerSide(): number;
+    get maxCachedTiles(): number;
+    get interactionDebounceMs(): number;
+    get subdomains(): string[];
+    get attribution(): string;
+    get flipY(): boolean;
+    get maxConcurrentLoads(): number;
+}

package/lib-esm/model/earth/XYZMapDescriptor.js

@@ -0,0 +1,77 @@
+/*
+ * AstroViewer
+ * Copyright (C) Fabrizio Giordano
+ * SPDX-License-Identifier: LicenseRef-AstroViewer-Dual-License
+ *
+ * This file is part of AstroViewer.
+ * AstroViewer is distributed under a dual-license model.
+ * Commercial use requires a separate commercial license.
+ * Non-commercial use is governed by LICENSE-NONCOMMERCIAL.md.
+ *
+ * See LICENSE.md, LICENSE-COMMERCIAL.md, and LICENSE-NONCOMMERCIAL.md for details.
+ */
+export class XYZMapDescriptor {
+    _name;
+    _url;
+    _urlResolver;
+    _minZoom;
+    _maxZoom;
+    _segmentsPerSide;
+    _tileSize;
+    _maxCachedTiles;
+    _interactionDebounceMs;
+    _subdomains;
+    _attribution;
+    _flipY;
+    _maxConcurrentLoads;
+    constructor(name, url, minZoom = 0, maxZoom = 8, segmentsPerSide = 16, maxCachedTiles = 384, maxConcurrentLoads = 8, urlResolver) {
+        this._name = name;
+        this._url = url;
+        this._urlResolver = urlResolver;
+        this._minZoom = minZoom;
+        this._maxZoom = maxZoom;
+        this._segmentsPerSide = segmentsPerSide;
+        this._maxCachedTiles = maxCachedTiles;
+        this._interactionDebounceMs = 100;
+        this._subdomains = ['a', 'b', 'c'];
+        this._attribution = '';
+        this._flipY = false;
+        this._maxConcurrentLoads = maxConcurrentLoads;
+    }
+    get url() {
+        return this._url;
+    }
+    get urlResolver() {
+        return this._urlResolver;
+    }
+    get name() {
+        return this._name;
+    }
+    get minZoom() {
+        return this._minZoom;
+    }
+    get maxZoom() {
+        return this._maxZoom;
+    }
+    get segmentsPerSide() {
+        return this._segmentsPerSide;
+    }
+    get maxCachedTiles() {
+        return this._maxCachedTiles;
+    }
+    get interactionDebounceMs() {
+        return this._interactionDebounceMs;
+    }
+    get subdomains() {
+        return this._subdomains;
+    }
+    get attribution() {
+        return this._attribution;
+    }
+    get flipY() {
+        return this._flipY;
+    }
+    get maxConcurrentLoads() {
+        return this._maxConcurrentLoads;
+    }
+}

package/lib-esm/model/earth/XYZMeshBuilder.d.ts

@@ -1,4 +1,4 @@
-import type { XYZTileCoord, XYZTileMesh, XYZTileGpuMesh } from './types.js';
+import type { XYZTileCoord, XYZTileGpuMesh, XYZTileMesh } from './XYZTypes.js';
 export declare class XYZMeshBuilder {
     buildTileMesh(tile: XYZTileCoord, segmentsPerSide?: number): XYZTileMesh;
     buildAncestorMesh(targetTile: XYZTileCoord, ancestorTile: XYZTileCoord, segmentsPerSide?: number): XYZTileMesh;

package/lib-esm/model/earth/XYZMeshBuilder.js

@@ -1,3 +1,15 @@
+/*
+ * AstroViewer
+ * Copyright (C) Fabrizio Giordano
+ * SPDX-License-Identifier: LicenseRef-AstroViewer-Dual-License
+ *
+ * This file is part of AstroViewer.
+ * AstroViewer is distributed under a dual-license model.
+ * Commercial use requires a separate commercial license.
+ * Non-commercial use is governed by LICENSE-NONCOMMERCIAL.md.
+ *
+ * See LICENSE.md, LICENSE-COMMERCIAL.md, and LICENSE-NONCOMMERCIAL.md for details.
+ */
 import { sphericalToCartesian } from '../../utils/Utils.js';
 const MAX_MERCATOR_LAT = 85.0511287798066;
 function mercatorYToLatDeg(yNormalized) {
@@ -35,8 +47,7 @@ export class XYZMeshBuilder {
                 uvs[uv++] = 1 - v;
             }
         }
-        const triangleCount = segments * segments * 2;
-        const rawIndices = new Uint32Array(triangleCount * 3);
+        const rawIndices = new Uint32Array(segments * segments * 2 * 3);
         let i = 0;
         for (let row = 0; row < segments; row++) {
             for (let col = 0; col < segments; col++) {

package/lib-esm/model/earth/XYZTile.d.ts

@@ -1,39 +1,38 @@
 import { XYZShaderProgram } from '../../shader/XYZShaderProgram.js';
-import type { XYZTileCoord, XYZTileGpuMesh, XYZTileMesh } from './types.js';
-export declare class XYZTile {
+import type { XYZBufferedTile } from './XYZTileBuffer.js';
+import { XYZMeshBuilder } from './XYZMeshBuilder.js';
+import type { XYZTileCoord, XYZTileGpuMesh } from './XYZTypes.js';
+type Mat4 = Float32Array;
+export declare class XYZTile implements XYZBufferedTile {
     private _coord;
     private _url;
     private _webgl;
     private _shaderProgram;
-    private _positionBuffer;
-    private _uvBuffer;
-    private _indexBuffer;
+    private _meshBuilder;
+    private _gpuMesh;
     private _texture;
-    private _indices;
-    private _indexType;
+    private _image?;
     private _ready;
-    private _aborted;
     private _loading;
+    private _aborted;
     private _failedUntil;
     private _lastUsedAt;
     private _createdAt;
-    private _image?;
-    private _objectUrl;
-    constructor(coord: XYZTileCoord, url: string, mesh: XYZTileMesh, webgl: WebGL2RenderingContext, shaderProgram: XYZShaderProgram);
-    get ready(): boolean;
+    constructor(coord: XYZTileCoord, url: string, webgl: WebGL2RenderingContext, shaderProgram: XYZShaderProgram, meshBuilder?: XYZMeshBuilder, segmentsPerSide?: number);
     get coord(): XYZTileCoord;
-    get failedUntil(): number;
+    get ready(): boolean;
     get loading(): boolean;
+    get failedUntil(): number;
     get lastUsedAt(): number;
     get createdAt(): number;
     touch(): void;
-    primeLoad(priority?: number): void;
-    private loadTexture;
-    private loadImageFromBlob;
-    private onImageLoaded;
-    draw(pMatrix: Float32Array, vMatrix: Float32Array, mMatrix: Float32Array, priority?: number, allowLoad?: boolean): void;
-    drawRemapped(mesh: XYZTileGpuMesh, pMatrix: Float32Array, vMatrix: Float32Array, mMatrix: Float32Array): void;
-    private drawWithGpuMesh;
+    private initImage;
+    private imageLoaded;
+    private textureLoaded;
+    draw(pMatrix: Mat4, vMatrix: Mat4, mMatrix: Mat4, colorMapIdx: number): boolean;
+    drawRemapped(mesh: XYZTileGpuMesh, pMatrix: Mat4, vMatrix: Mat4, mMatrix: Mat4, colorMapIdx: number): boolean;
     dispose(): void;
-    private revokeObjectUrl;
+    private drawWithGpuMesh;
+    private get key();
 }
+export {};

package/lib-esm/model/earth/XYZTile.js

@@ -1,52 +1,53 @@
-import { xyzTileRequestScheduler, XYZTileRequestError } from './XYZTileRequestScheduler.js';
+/*
+ * AstroViewer
+ * Copyright (C) Fabrizio Giordano
+ * SPDX-License-Identifier: LicenseRef-AstroViewer-Dual-License
+ *
+ * This file is part of AstroViewer.
+ * AstroViewer is distributed under a dual-license model.
+ * Commercial use requires a separate commercial license.
+ * Non-commercial use is governed by LICENSE-NONCOMMERCIAL.md.
+ *
+ * See LICENSE.md, LICENSE-COMMERCIAL.md, and LICENSE-NONCOMMERCIAL.md for details.
+ */
+import { XYZMeshBuilder } from './XYZMeshBuilder.js';
 export class XYZTile {
     _coord;
     _url;
     _webgl;
     _shaderProgram;
-    _positionBuffer;
-    _uvBuffer;
-    _indexBuffer;
+    _meshBuilder;
+    _gpuMesh;
     _texture = null;
-    _indices;
-    _indexType;
+    _image;
     _ready = false;
-    _aborted = false;
     _loading = false;
+    _aborted = false;
     _failedUntil = 0;
     _lastUsedAt = 0;
     _createdAt = Date.now();
-    _image;
-    _objectUrl = null;
-    constructor(coord, url, mesh, webgl, shaderProgram) {
+    constructor(coord, url, webgl, shaderProgram, meshBuilder = new XYZMeshBuilder(), segmentsPerSide = 16) {
         this._coord = coord;
         this._url = url;
         this._webgl = webgl;
         this._shaderProgram = shaderProgram;
-        this._positionBuffer = webgl.createBuffer();
-        this._uvBuffer = webgl.createBuffer();
-        this._indexBuffer = webgl.createBuffer();
-        this._indices = mesh.indices;
-        this._indexType = mesh.indices instanceof Uint32Array ? webgl.UNSIGNED_INT : webgl.UNSIGNED_SHORT;
-        webgl.bindBuffer(webgl.ARRAY_BUFFER, this._positionBuffer);
-        webgl.bufferData(webgl.ARRAY_BUFFER, mesh.positions, webgl.STATIC_DRAW);
-        webgl.bindBuffer(webgl.ARRAY_BUFFER, this._uvBuffer);
-        webgl.bufferData(webgl.ARRAY_BUFFER, mesh.uvs, webgl.STATIC_DRAW);
-        webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, this._indexBuffer);
-        webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, mesh.indices, webgl.STATIC_DRAW);
-    }
-    get ready() {
-        return this._ready;
+        this._meshBuilder = meshBuilder;
+        const mesh = this._meshBuilder.buildTileMesh(coord, segmentsPerSide);
+        this._gpuMesh = this._meshBuilder.uploadMesh(mesh, this._webgl);
+        this.initImage();
     }
     get coord() {
         return this._coord;
     }
-    get failedUntil() {
-        return this._failedUntil;
+    get ready() {
+        return this._ready;
     }
     get loading() {
         return this._loading;
     }
+    get failedUntil() {
+        return this._failedUntil;
+    }
     get lastUsedAt() {
         return this._lastUsedAt;
     }
@@ -56,10 +57,7 @@ export class XYZTile {
     touch() {
         this._lastUsedAt = Date.now();
     }
-    primeLoad(priority = 0) {
-        this.loadTexture(priority);
-    }
-    loadTexture(priority = 0) {
+    initImage() {
         if (this._loading || this._ready || this._aborted) {
             return;
         }
@@ -68,80 +66,88 @@ export class XYZTile {
             return;
         }
         this._loading = true;
-        xyzTileRequestScheduler.load(this._url, priority)
-            .then((blob) => this.loadImageFromBlob(blob))
-            .catch((error) => {
-            this._loading = false;
-            this._ready = false;
-            const cooldownMs = error instanceof XYZTileRequestError ? error.cooldownMs : 10000;
-            this._failedUntil = Date.now() + cooldownMs;
-        });
-    }
-    loadImageFromBlob(blob) {
         const image = new Image();
         this._image = image;
-        this._objectUrl = URL.createObjectURL(blob);
-        image.onload = () => this.onImageLoaded();
+        image.crossOrigin = 'anonymous';
+        image.onload = () => this.imageLoaded();
         image.onerror = () => {
-            this._loading = false;
             this._ready = false;
-            this._failedUntil = Date.now() + 30000;
-            this.revokeObjectUrl();
+            this._loading = false;
+            this._failedUntil = Date.now() + 30_000;
         };
-        image.src = this._objectUrl;
+        image.src = this._url;
     }
-    onImageLoaded() {
+    imageLoaded() {
         if (!this._image || this._aborted) {
             return;
         }
+        this.textureLoaded(this._image);
+        this._loading = false;
+        this._failedUntil = 0;
+        this._ready = true;
+    }
+    textureLoaded(image) {
         const gl = this._webgl;
+        this._shaderProgram.enableProgram();
         const texture = gl.createTexture();
         if (!texture) {
-            throw new Error('Could not create XYZ texture');
+            throw new Error(`Could not create XYZ texture for ${this.key}`);
         }
         this._texture = texture;
         gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, texture);
         gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this._image);
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-        this._loading = false;
-        this._failedUntil = 0;
-        this._ready = true;
-        this.revokeObjectUrl();
     }
-    draw(pMatrix, vMatrix, mMatrix, priority = 0, allowLoad = true) {
+    draw(pMatrix, vMatrix, mMatrix, colorMapIdx) {
         this.touch();
-        if (!this._ready && allowLoad) {
-            this.loadTexture(priority);
-        }
-        if (!this._ready || !this._texture) {
-            return;
+        if (!this._ready || !this._texture || this._aborted) {
+            return false;
         }
-        this.drawWithGpuMesh({
-            positionBuffer: this._positionBuffer,
-            uvBuffer: this._uvBuffer,
-            indexBuffer: this._indexBuffer,
-            indexCount: this._indices.length,
-            indexType: this._indexType,
-        }, pMatrix, vMatrix, mMatrix);
-    }
-    drawRemapped(mesh, pMatrix, vMatrix, mMatrix) {
+        this.drawWithGpuMesh(this._gpuMesh, pMatrix, vMatrix, mMatrix, colorMapIdx);
+        return true;
+    }
+    drawRemapped(mesh, pMatrix, vMatrix, mMatrix, colorMapIdx) {
         this.touch();
-        if (!this._ready || !this._texture) {
-            return;
+        if (!this._ready || !this._texture || this._aborted) {
+            return false;
         }
-        this.drawWithGpuMesh(mesh, pMatrix, vMatrix, mMatrix);
+        this.drawWithGpuMesh(mesh, pMatrix, vMatrix, mMatrix, colorMapIdx);
+        return true;
+    }
+    dispose() {
+        const gl = this._webgl;
+        if (this._texture) {
+            gl.deleteTexture(this._texture);
+            this._texture = null;
+        }
+        if (this._gpuMesh.positionBuffer) {
+            gl.deleteBuffer(this._gpuMesh.positionBuffer);
+            this._gpuMesh.positionBuffer = null;
+        }
+        if (this._gpuMesh.uvBuffer) {
+            gl.deleteBuffer(this._gpuMesh.uvBuffer);
+            this._gpuMesh.uvBuffer = null;
+        }
+        if (this._gpuMesh.indexBuffer) {
+            gl.deleteBuffer(this._gpuMesh.indexBuffer);
+            this._gpuMesh.indexBuffer = null;
+        }
+        this._image = undefined;
+        this._ready = false;
+        this._loading = false;
+        this._aborted = true;
     }
-    drawWithGpuMesh(mesh, pMatrix, vMatrix, mMatrix) {
+    drawWithGpuMesh(mesh, pMatrix, vMatrix, mMatrix, colorMapIdx) {
         if (!this._texture) {
             return;
         }
         const gl = this._webgl;
-        this._shaderProgram.enableShaders(pMatrix, vMatrix, mMatrix);
+        this._shaderProgram.enableShaders(pMatrix, vMatrix, mMatrix, colorMapIdx);
         gl.bindBuffer(gl.ARRAY_BUFFER, mesh.positionBuffer);
         gl.vertexAttribPointer(this._shaderProgram.locations.vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
         gl.enableVertexAttribArray(this._shaderProgram.locations.vertexPositionAttribute);
@@ -155,33 +161,7 @@ export class XYZTile {
         gl.disableVertexAttribArray(this._shaderProgram.locations.vertexPositionAttribute);
         gl.disableVertexAttribArray(this._shaderProgram.locations.textureCoordAttribute);
     }
-    dispose() {
-        const gl = this._webgl;
-        if (this._texture) {
-            gl.deleteTexture(this._texture);
-            this._texture = null;
-        }
-        if (this._positionBuffer) {
-            gl.deleteBuffer(this._positionBuffer);
-            this._positionBuffer = null;
-        }
-        if (this._uvBuffer) {
-            gl.deleteBuffer(this._uvBuffer);
-            this._uvBuffer = null;
-        }
-        if (this._indexBuffer) {
-            gl.deleteBuffer(this._indexBuffer);
-            this._indexBuffer = null;
-        }
-        this._image = undefined;
-        this.revokeObjectUrl();
-        this._loading = false;
-        this._ready = false;
-    }
-    revokeObjectUrl() {
-        if (this._objectUrl) {
-            URL.revokeObjectURL(this._objectUrl);
-            this._objectUrl = null;
-        }
+    get key() {
+        return `${this._coord.z}/${this._coord.x}/${this._coord.y}`;
     }
 }