maplibre-gl 2.1.8 → 2.2.0-pre.2

package/src/source/source_cache.ts

@@ -21,6 +21,8 @@ import type Transform from '../geo/transform';
 import type {TileState} from './tile';
 import type {Callback} from '../types/callback';
 import type {SourceSpecification} from '../style-spec/types.g';
+import type {MapSourceDataEvent} from '../ui/events';
+import Terrain from '../render/terrain';
 
 /**
  * `SourceCache` is responsible for
@@ -56,7 +58,10 @@ class SourceCache extends Evented {
     _shouldReloadOnResume: boolean;
     _coveredTiles: {[_: string]: boolean};
     transform: Transform;
+    terrain: Terrain;
     used: boolean;
+    usedForTerrain: boolean;
+    tileSize: number;
     _state: SourceFeatureState;
     _loadedParentTiles: {[_: string]: Tile};
 
@@ -68,7 +73,7 @@ class SourceCache extends Evented {
         this.id = id;
         this.dispatcher = dispatcher;
 
-        this.on('data', (e) => {
+        this.on('data', (e: MapSourceDataEvent) => {
             // this._sourceLoaded signifies that the TileJSON is loaded if applicable.
             // if the source type does not come with a TileJSON, the flag signifies the
             // source data has loaded (i.e geojson has been tiled on the worker and is ready)
@@ -79,7 +84,7 @@ class SourceCache extends Evented {
             if (this._sourceLoaded && !this._paused && e.dataType === 'source' && e.sourceDataType === 'content') {
                 this.reload();
                 if (this.transform) {
-                    this.update(this.transform);
+                    this.update(this.transform, this.terrain);
                 }
             }
         });
@@ -152,7 +157,7 @@ class SourceCache extends Evented {
         this._paused = false;
         this._shouldReloadOnResume = false;
         if (shouldReload) this.reload();
-        if (this.transform) this.update(this.transform);
+        if (this.transform) this.update(this.transform, this.terrain);
     }
 
     _loadTile(tile: Tile, callback: Callback<void>) {
@@ -263,7 +268,7 @@ class SourceCache extends Evented {
             tile.state = 'errored';
             if ((err as any).status !== 404) this._source.fire(new ErrorEvent(err, {tile}));
             // continue to try loading parent/children tiles if a tile doesn't exist (404)
-            else this.update(this.transform);
+            else this.update(this.transform, this.terrain);
             return;
         }
 
@@ -295,6 +300,7 @@ class SourceCache extends Evented {
 
         function fillBorder(tile, borderTile) {
             tile.needsHillshadePrepare = true;
+            tile.needsTerrainPrepare = true;
             let dx = borderTile.tileID.canonical.x - tile.tileID.canonical.x;
             const dy = borderTile.tileID.canonical.y - tile.tileID.canonical.y;
             const dim = Math.pow(2, tile.tileID.canonical.z);
@@ -486,8 +492,9 @@ class SourceCache extends Evented {
      * are inside the viewport.
      * @private
      */
-    update(transform: Transform) {
+    update(transform: Transform, terrain: Terrain) {
         this.transform = transform;
+        this.terrain = terrain;
         if (!this._sourceLoaded || this._paused) { return; }
 
         this.updateCacheSize(transform);
@@ -498,18 +505,19 @@ class SourceCache extends Evented {
         this._coveredTiles = {};
 
         let idealTileIDs;
-        if (!this.used) {
+        if (!this.used && !this.usedForTerrain) {
             idealTileIDs = [];
         } else if (this._source.tileID) {
             idealTileIDs = transform.getVisibleUnwrappedCoordinates(this._source.tileID)
                 .map((unwrapped) => new OverscaledTileID(unwrapped.canonical.z, unwrapped.wrap, unwrapped.canonical.z, unwrapped.canonical.x, unwrapped.canonical.y));
         } else {
             idealTileIDs = transform.coveringTiles({
-                tileSize: this._source.tileSize,
+                tileSize: this.usedForTerrain ? this.tileSize : this._source.tileSize,
                 minzoom: this._source.minzoom,
                 maxzoom: this._source.maxzoom,
-                roundZoom: this._source.roundZoom,
-                reparseOverscaled: this._source.reparseOverscaled
+                roundZoom: this.usedForTerrain ? false : this._source.roundZoom,
+                reparseOverscaled: this._source.reparseOverscaled,
+                terrain
             });
 
             if (this._source.hasTile) {
@@ -522,6 +530,21 @@ class SourceCache extends Evented {
         const minCoveringZoom = Math.max(zoom - SourceCache.maxOverzooming, this._source.minzoom);
         const maxCoveringZoom = Math.max(zoom + SourceCache.maxUnderzooming,  this._source.minzoom);
 
+        // When sourcecache is used for terrain also load parent tiles to avoid flickering when zooming out
+        if (this.usedForTerrain) {
+            const parents = {};
+            for (const tileID of idealTileIDs) {
+                if (tileID.canonical.z > this._source.minzoom) {
+                    const parent = tileID.scaledTo(tileID.canonical.z - 1);
+                    parents[parent.key] = parent;
+                    // load very low zoom to calculate tile visability in transform.coveringTiles and high zoomlevels correct
+                    const parent2 = tileID.scaledTo(Math.max(this._source.minzoom, Math.min(tileID.canonical.z, 5)));
+                    parents[parent2.key] = parent2;
+                }
+            }
+            idealTileIDs = idealTileIDs.concat(Object.values(parents));
+        }
+
         // Retain is a list of tiles that we shouldn't delete, even if they are not
         // the most ideal tile for the current viewport. This may include tiles like
         // parent or child tiles that are *already* loaded.
@@ -558,6 +581,44 @@ class SourceCache extends Evented {
                     retain[id] = parentsForFading[id];
                 }
             }
+
+            // disable fading logic in terrain3D mode to avoid rendering two tiles on the same place
+            if (terrain) {
+                const idealRasterTileIDs: {[_: string]: OverscaledTileID} = {};
+                const missingTileIDs: {[_: string]: OverscaledTileID} = {};
+                for (const tileID of idealTileIDs) {
+                    if (this._tiles[tileID.key].hasData())
+                        idealRasterTileIDs[tileID.key] = tileID;
+                    else
+                        missingTileIDs[tileID.key] = tileID;
+                }
+                // search for a complete set of children for each missing tile
+                for (const key in missingTileIDs) {
+                    const children = missingTileIDs[key].children(this._source.maxzoom);
+                    if (this._tiles[children[0].key] && this._tiles[children[1].key] && this._tiles[children[2].key] && this._tiles[children[3].key]) {
+                        idealRasterTileIDs[children[0].key] = retain[children[0].key] = children[0];
+                        idealRasterTileIDs[children[1].key] = retain[children[1].key] = children[1];
+                        idealRasterTileIDs[children[2].key] = retain[children[2].key] = children[2];
+                        idealRasterTileIDs[children[3].key] = retain[children[3].key] = children[3];
+                        delete missingTileIDs[key];
+                    }
+                }
+                // search for parent for each missing tile
+                for (const key in missingTileIDs) {
+                    const parent = this.findLoadedParent(missingTileIDs[key], this._source.minzoom);
+                    if (parent) {
+                        idealRasterTileIDs[parent.tileID.key] = retain[parent.tileID.key] = parent.tileID;
+                        // remove idealTiles which would be rendered twice
+                        for (const key in idealRasterTileIDs) {
+                            if (idealRasterTileIDs[key].isChildOf(parent.tileID)) delete idealRasterTileIDs[key];
+                        }
+                    }
+                }
+                // cover all tiles which are not needed
+                for (const key in this._tiles) {
+                    if (!idealRasterTileIDs[key]) this._coveredTiles[key] = true;
+                }
+            }
         }
 
         for (const retainedId in retain) {
@@ -819,8 +880,8 @@ class SourceCache extends Evented {
             transform.getCameraQueryGeometry(pointQueryGeometry) :
             pointQueryGeometry;
 
-        const queryGeometry = pointQueryGeometry.map((p) => transform.pointCoordinate(p));
-        const cameraQueryGeometry = cameraPointQueryGeometry.map((p) => transform.pointCoordinate(p));
+        const queryGeometry = pointQueryGeometry.map((p: Point) => transform.pointCoordinate(p, this.terrain));
+        const cameraQueryGeometry = cameraPointQueryGeometry.map((p: Point) => transform.pointCoordinate(p, this.terrain));
 
         const ids = this.getIds();
 

package/src/source/terrain_source_cache.test.ts

@@ -0,0 +1,89 @@
+import TerrainSourceCache from './terrain_source_cache';
+import Style from '../style/style';
+import {RequestManager} from '../util/request_manager';
+import Dispatcher from '../util/dispatcher';
+import {fakeServer, FakeServer} from 'nise';
+import Transform from '../geo/transform';
+import {Evented} from '../util/evented';
+import Painter from '../render/painter';
+import Context from '../gl/context';
+import gl from 'gl';
+import RasterDEMTileSource from './raster_dem_tile_source';
+
+const context = new Context(gl(10, 10));
+const transform = new Transform();
+
+class StubMap extends Evented {
+    transform: Transform;
+    painter: Painter;
+    _requestManager: RequestManager;
+
+    constructor() {
+        super();
+        this.transform = transform;
+        this._requestManager = {
+            transformRequest: (url) => {
+                return {url};
+            }
+        } as any as RequestManager;
+    }
+}
+
+function createSource(options, transformCallback?) {
+    const source = new RasterDEMTileSource('id', options, {send() {}} as any as Dispatcher, null);
+    source.onAdd({
+        transform,
+        _getMapId: () => 1,
+        _requestManager: new RequestManager(transformCallback),
+        getPixelRatio() { return 1; }
+    } as any);
+
+    source.on('error', (e) => {
+        throw e.error;
+    });
+
+    return source;
+}
+
+describe('TerrainSourceCache', () => {
+    let server: FakeServer;
+    let style: Style;
+    let tsc: TerrainSourceCache;
+
+    beforeAll(done => {
+        global.fetch = null;
+        server = fakeServer.create();
+        server.respondWith('/source.json', JSON.stringify({
+            minzoom: 0,
+            maxzoom: 22,
+            attribution: 'MapLibre',
+            tiles: ['http://example.com/{z}/{x}/{y}.pngraw'],
+            bounds: [-47, -7, -45, -5]
+        }));
+        const map = new StubMap();
+        style = new Style(map as any);
+        style.map.painter = {style, context} as any;
+        style.on('style.load', () => {
+            const source = createSource({url: '/source.json'});
+            server.respond();
+            style.addSource('terrain', source as any);
+            tsc = new TerrainSourceCache(style.sourceCaches.terrain);
+            done();
+        });
+        style.loadJSON({
+            'version': 8,
+            'sources': {},
+            'layers': []
+        });
+    });
+
+    afterAll(() => {
+        server.restore();
+    });
+
+    test('#constructor', () => {
+        expect(tsc.sourceCache.usedForTerrain).toBeTruthy();
+        expect(tsc.sourceCache.tileSize).toBe(tsc.tileSize * 2 ** tsc.deltaZoom);
+    });
+
+});

package/src/source/terrain_source_cache.ts

@@ -0,0 +1,201 @@
+import {OverscaledTileID} from './tile_id';
+import Tile from './tile';
+import EXTENT from '../data/extent';
+import {mat4} from 'gl-matrix';
+import {Evented} from '../util/evented';
+import type Transform from '../geo/transform';
+import type SourceCache from '../source/source_cache';
+import Painter from '../render/painter';
+import Terrain from '../render/terrain';
+
+/**
+ * This class is a helper for the Terrain-class, it:
+ *   - loads raster-dem tiles
+ *   - manages all renderToTexture tiles.
+ *   - caches previous rendered tiles.
+ *   - finds all necessary renderToTexture tiles for a OverscaledTileID area
+ *   - finds the corresponding raster-dem tile for OverscaledTileID
+ */
+
+export default class TerrainSourceCache extends Evented {
+    // source-cache for the raster-dem source.
+    sourceCache: SourceCache;
+    // stores all render-to-texture tiles.
+    _tiles: {[_: string]: Tile};
+    // contains a list of tileID-keys for the current scene. (only for performance)
+    _renderableTilesKeys: Array<string>;
+    // raster-dem-tile for a TileID cache.
+    _sourceTileCache: {[_: string]: string};
+    // minimum zoomlevel to render the terrain.
+    minzoom: number;
+    // maximum zoomlevel to render the terrain.
+    maxzoom: number;
+    // render-to-texture tileSize in scene.
+    tileSize: number;
+    // raster-dem tiles will load for performance the actualZoom - deltaZoom zoom-level.
+    deltaZoom: number;
+    // each time a render-to-texture tile is rendered, its tileID.key is stored into this array
+    renderHistory: Array<string>;
+    // maximal size of render-history
+    renderHistorySize: number;
+
+    constructor(sourceCache: SourceCache) {
+        super();
+        this.sourceCache = sourceCache;
+        this._tiles = {};
+        this._renderableTilesKeys = [];
+        this._sourceTileCache = {};
+        this.renderHistory = [];
+        this.minzoom = 0;
+        this.maxzoom = 22;
+        this.tileSize = 512;
+        this.deltaZoom = 1;
+        this.renderHistorySize = 150;
+        sourceCache.usedForTerrain = true;
+        sourceCache.tileSize = this.tileSize * 2 ** this.deltaZoom;
+    }
+
+    destruct() {
+        this.sourceCache.usedForTerrain = false;
+        this.sourceCache.tileSize = null;
+        for (const key in this._tiles) {
+            const tile = this._tiles[key];
+            tile.textures.forEach(t => t.destroy());
+            tile.textures = [];
+        }
+    }
+
+    /**
+     * Load Terrain Tiles, create internal render-to-texture tiles, free GPU memory.
+     * @param {Transform} transform - the operation to do
+     * @param {Terrain} terrain - the terrain
+     */
+    update(transform: Transform, terrain: Terrain): void {
+        // load raster-dem tiles for the current scene.
+        this.sourceCache.update(transform, terrain);
+        // create internal render-to-texture tiles for the current scene.
+        this._renderableTilesKeys = [];
+        for (const tileID of transform.coveringTiles({
+            tileSize: this.tileSize,
+            minzoom: this.minzoom,
+            maxzoom: this.maxzoom,
+            reparseOverscaled: false,
+            terrain
+        })) {
+            this._renderableTilesKeys.push(tileID.key);
+            if (!this._tiles[tileID.key]) {
+                tileID.posMatrix = new Float64Array(16) as any;
+                mat4.ortho(tileID.posMatrix, 0, EXTENT, 0, EXTENT, 0, 1);
+                this._tiles[tileID.key] = new Tile(tileID, this.tileSize);
+            }
+        }
+    }
+
+    /**
+     * This method should called before each render-to-texture step to free old cached tiles
+     * @param {Painter} painter - the painter
+     */
+    removeOutdated(painter: Painter) {
+        // create lookuptable for actual needed tiles
+        const tileIDs = {};
+        for (const key of this._renderableTilesKeys) tileIDs[key] = true;
+        // remove duplicates from renderHistory
+        this.renderHistory = this.renderHistory.filter((i, p) => this.renderHistory.indexOf(i) === p);
+        // free (GPU) memory from previously rendered not needed tiles
+        while (this.renderHistory.length > this.renderHistorySize) {
+            const tile = this.sourceCache._tiles[this.renderHistory.shift()];
+            if (tile && !tileIDs[tile.tileID.key]) {
+                tile.clearTextures(painter);
+                delete this.sourceCache._tiles[tile.tileID.key];
+            }
+        }
+    }
+
+    /**
+     * get a list of tiles, which are loaded and should be rendered in the current scene
+     * @returns {Array<Tile>} the renderable tiles
+     */
+    getRenderableTiles(): Array<Tile> {
+        return this._renderableTilesKeys.map(key => this.getTileByID(key));
+    }
+
+    /**
+     * get terrain tile by the TileID key
+     * @param id - the tile id
+     * @returns {Tile} - the tile
+     */
+    getTileByID(id: string): Tile {
+        return this._tiles[id];
+    }
+
+    /**
+     * searches for the corresponding current renderable terrain-tiles
+     * @param {OverscaledTileID} tileID - the tile to look for
+     * @returns {[_:string]: Tile} - the tiles that were found
+     */
+    getTerrainCoords(tileID: OverscaledTileID): {[_: string]: OverscaledTileID} {
+        const coords = {};
+        for (const key of this._renderableTilesKeys) {
+            const _tileID = this._tiles[key].tileID;
+            if (_tileID.canonical.equals(tileID.canonical)) {
+                const coord = tileID.clone();
+                coord.posMatrix = new Float64Array(16) as any;
+                mat4.ortho(coord.posMatrix, 0, EXTENT, 0, EXTENT, 0, 1);
+                coords[key] = coord;
+            } else if (_tileID.canonical.isChildOf(tileID.canonical)) {
+                const coord = tileID.clone();
+                coord.posMatrix = new Float64Array(16) as any;
+                const dz = _tileID.canonical.z - tileID.canonical.z;
+                const dx = _tileID.canonical.x - (_tileID.canonical.x >> dz << dz);
+                const dy = _tileID.canonical.y - (_tileID.canonical.y >> dz << dz);
+                const size = EXTENT >> dz;
+                mat4.ortho(coord.posMatrix, 0, size, 0, size, 0, 1);
+                mat4.translate(coord.posMatrix, coord.posMatrix, [-dx * size, -dy * size, 0]);
+                coords[key] = coord;
+            } else if (tileID.canonical.isChildOf(_tileID.canonical)) {
+                const coord = tileID.clone();
+                coord.posMatrix = new Float64Array(16) as any;
+                const dz = tileID.canonical.z - _tileID.canonical.z;
+                const dx = tileID.canonical.x - (tileID.canonical.x >> dz << dz);
+                const dy = tileID.canonical.y - (tileID.canonical.y >> dz << dz);
+                const size = EXTENT >> dz;
+                mat4.ortho(coord.posMatrix, 0, EXTENT, 0, EXTENT, 0, 1);
+                mat4.translate(coord.posMatrix, coord.posMatrix, [dx * size, dy * size, 0]);
+                mat4.scale(coord.posMatrix, coord.posMatrix, [1 / (2 ** dz), 1 / (2 ** dz), 0]);
+                coords[key] = coord;
+            }
+        }
+        return coords;
+    }
+
+    /**
+     * find the covering raster-dem tile
+     * @param {OverscaledTileID} tileID - the tile to look for
+     * @param {boolean} searchForDEM Optinal parameter to search for (parent) souretiles with loaded dem.
+     * @returns {Tile} - the tile
+     */
+    getSourceTile(tileID: OverscaledTileID, searchForDEM?: boolean): Tile {
+        const source = this.sourceCache._source;
+        let z = tileID.overscaledZ - this.deltaZoom;
+        if (z > source.maxzoom) z = source.maxzoom;
+        if (z < source.minzoom) return null;
+        // cache for tileID to terrain-tileID
+        if (!this._sourceTileCache[tileID.key])
+            this._sourceTileCache[tileID.key] = tileID.scaledTo(z).key;
+        let tile = this.sourceCache.getTileByID(this._sourceTileCache[tileID.key]);
+        // during tile-loading phase look if parent tiles (with loaded dem) are available.
+        if (!(tile && tile.dem) && searchForDEM)
+            while (z > source.minzoom && !(tile && tile.dem))
+                tile = this.sourceCache.getTileByID(tileID.scaledTo(z--).key);
+        return tile;
+    }
+
+    /**
+     * get a list of tiles, loaded after a spezific time. This is used to update depth & coords framebuffers.
+     * @param {Date} time - the time
+     * @returns {Array<Tile>} - the relevant tiles
+     */
+    tilesAfterTime(time = Date.now()): Array<Tile> {
+        return Object.values(this._tiles).filter(t => t.timeLoaded >= time);
+    }
+}

package/src/source/tile.ts

@@ -65,6 +65,7 @@ class Tile {
     expiredRequestCount: number;
     state: TileState;
     timeAdded: any;
+    timeLoaded: any;
     fadeEndTime: any;
     collisionBoxArray: CollisionBoxArray;
     redoWhenDone: boolean;
@@ -75,8 +76,10 @@ class Tile {
 
     neighboringTiles: any;
     dem: DEMData;
+    demMatrix: mat4;
     aborted: boolean;
     needsHillshadePrepare: boolean;
+    needsTerrainPrepare: boolean;
     request: Cancelable;
     texture: any;
     fbo: Framebuffer;
@@ -90,6 +93,8 @@ class Tile {
     hasSymbolBuckets: boolean;
     hasRTLText: boolean;
     dependencies: any;
+    textures: Array<Texture>;
+    textureCoords: {[_: string]: string}; // remeber all coords rendered to textures
 
     /**
      * @param {OverscaledTileID} tileID
@@ -107,6 +112,8 @@ class Tile {
         this.hasSymbolBuckets = false;
         this.hasRTLText = false;
         this.dependencies = {};
+        this.textures = [];
+        this.textureCoords = {};
 
         // Counts the number of times a response was already expired when
         // received. We're using this to add a delay when making a new request
@@ -129,6 +136,14 @@ class Tile {
         return this.state === 'errored' || this.state === 'loaded' || this.state === 'reloading';
     }
 
+    clearTextures(painter: any) {
+        if (this.demTexture) painter.saveTileTexture(this.demTexture);
+        this.textures.forEach(t => painter.saveTileTexture(t));
+        this.demTexture = null;
+        this.textures = [];
+        this.textureCoords = {};
+    }
+
     /**
      * Given a data object with a 'buffers' property, load it into
      * this tile's elementGroups and buffers properties and set loaded

package/src/source/tile_id.ts

@@ -42,6 +42,11 @@ export class CanonicalTileID {
             .replace(/{bbox-epsg-3857}/g, bbox);
     }
 
+    isChildOf(parent: CanonicalTileID) {
+        const dz = this.z - parent.z;
+        return  dz > 0 && parent.x === (this.x >> dz) && parent.y === (this.y >> dz);
+    }
+
     getTilePoint(coord: MercatorCoordinate) {
         const tilesAtZoom = Math.pow(2, this.z);
         return new Point(
@@ -81,6 +86,10 @@ export class OverscaledTileID {
         this.key = calculateKey(wrap, overscaledZ, z, x, y);
     }
 
+    clone() {
+        return new OverscaledTileID(this.overscaledZ, this.wrap, this.canonical.z, this.canonical.x, this.canonical.y);
+    }
+
     equals(id: OverscaledTileID) {
         return this.overscaledZ === id.overscaledZ && this.wrap === id.wrap && this.canonical.equals(id.canonical);
     }

package/src/style/pauseable_placement.ts

@@ -7,6 +7,7 @@ import type StyleLayer from './style_layer';
 import type SymbolStyleLayer from './style_layer/symbol_style_layer';
 import type Tile from '../source/tile';
 import type {BucketPart} from '../symbol/placement';
+import Terrain from '../render/terrain';
 
 class LayerPlacement {
     _sortAcrossTiles: boolean;
@@ -69,6 +70,7 @@ class PauseablePlacement {
 
     constructor(
         transform: Transform,
+        terrain: Terrain,
         order: Array<string>,
         forceFullPlacement: boolean,
         showCollisionBoxes: boolean,
@@ -76,7 +78,7 @@ class PauseablePlacement {
         crossSourceCollisions: boolean,
         prevPlacement?: Placement
     ) {
-        this.placement = new Placement(transform, fadeDuration, crossSourceCollisions, prevPlacement);
+        this.placement = new Placement(transform, terrain, fadeDuration, crossSourceCollisions, prevPlacement);
         this._currentPlacementIndex = order.length - 1;
         this._forceFullPlacement = forceFullPlacement;
         this._showCollisionBoxes = showCollisionBoxes;

package/src/style/style.test.ts

@@ -379,6 +379,22 @@ describe('Style#loadJSON', () => {
             style._layers.background.fire(new Event('error', {mapLibre: true}));
         });
     });
+
+    test('sets terrain if defined', (done) => {
+        const map = getStubMap();
+        const style = new Style(map);
+        map.transform.updateElevation = jest.fn();
+        style.loadJSON(createStyleJSON({
+            sources: {'source-id': createGeoJSONSource()},
+            terrain: {source: 'source-id', exaggeration: 0.33}
+        }));
+
+        style.on('style.load', () => {
+            expect(style.terrain).toBeDefined();
+            expect(map.transform.updateElevation).toHaveBeenCalled();
+            done();
+        });
+    });
 });
 
 describe('Style#_remove', () => {