Memory usage in 3d and in general, references #1291 (#1302)

Fixes #1291
* remove deprecated tiles from TerrainSourceCache

* Add changelog comment

Co-authored-by: HarelM <harel.mazor@gmail.com>

Author: prozessor13

CHANGELOG.md

@@ -8,7 +8,8 @@
 
 - *...Add new stuff here...*
 - Handle maxBounds which cross the meridian at longitude ±180° (#1298, #1299)
-- Hide arrow displayed in default `summary` styles on the attribution control ([#1258](https://github.com/maplibre/maplibre-gl-js/pull/1258))
+- Hide arrow displayed in default `summary` styles on the attribution control (#1258)
+- Fix memory usage in terrain 3D (#1291, #1302)
 
 ## 2.2.0-pre.2
 

src/render/draw_symbol.test.ts

@@ -14,9 +14,6 @@ import Transform from '../geo/transform';
 import type EvaluationParameters from '../style/evaluation_parameters';
 import type {SymbolLayerSpecification} from '../style-spec/types.g';
 import Style from '../style/style';
-import TerrainSourceCache from '../source/terrain_source_cache';
-import {Evented} from '../util/evented';
-import {RequestManager} from '../util/request_manager';
 
 jest.mock('./painter');
 jest.mock('./program');
@@ -25,22 +22,6 @@ jest.mock('../source/tile');
 jest.mock('../data/bucket/symbol_bucket');
 jest.mock('../symbol/projection');
 
-class StubMap extends Evented {
-    transform: Transform;
-    painter: Painter;
-    _requestManager: RequestManager;
-
-    constructor() {
-        super();
-        this.transform = new Transform();
-        this._requestManager = {
-            transformRequest: (url) => {
-                return {url};
-            }
-        } as any as RequestManager;
-    }
-}
-
 describe('drawSymbol', () => {
     test('should not do anything', () => {
         const mockPainter = new Painter(null, null);
@@ -63,7 +44,7 @@ describe('drawSymbol', () => {
         painterMock.renderPass = 'translucent';
         painterMock.transform = {pitch: 0, labelPlaneMatrix: mat4.create()} as any as Transform;
         painterMock.options = {} as any;
-        painterMock.style = {terrainSourceCache: {getTerrain: () => null}} as any as Style;
+        painterMock.style = {} as any as Style;
 
         const layerSpec = {
             id: 'mock-layer',
@@ -164,9 +145,7 @@ describe('drawSymbol', () => {
         const sourceCacheMock = new SourceCache(null, null, null);
         (sourceCacheMock.getTile as jest.Mock).mockReturnValue(tile);
         sourceCacheMock.map = {showCollisionBoxes: false} as any as Map;
-        painterMock.style = {
-            terrainSourceCache: new TerrainSourceCache(new Style(new StubMap() as any as Map))
-        } as any as Style;
+        painterMock.style = {} as any as Style;
 
         const spy = jest.spyOn(symbolProjection, 'updateLineLabels');
         drawSymbol(painterMock, sourceCacheMock, layer, [tileId], null);

src/render/draw_terrain.ts

@@ -107,7 +107,7 @@ function prepareTerrain(painter: Painter, terrain: Terrain, tile: Tile, stack: n
     if (!tile.textures[stack]) {
         tile.textures[stack] = painter.getTileTexture(size) || new Texture(context, {width: size, height: size, data: null}, context.gl.RGBA);
         tile.textures[stack].bind(context.gl.LINEAR, context.gl.CLAMP_TO_EDGE);
-        if (stack === 0) terrain.sourceCache.renderHistory.push(tile.tileID.key);
+        if (stack === 0) terrain.sourceCache.renderHistory.unshift(tile.tileID.key);
     }
     const fb = terrain.getRTTFramebuffer();
     fb.colorAttachment.set(tile.textures[stack].texture);

src/render/terrain.test.ts

@@ -6,8 +6,9 @@ import {RGBAImage} from '../util/image';
 import Texture from './texture';
 import type Style from '../style/style';
 import type SourceCache from '../source/source_cache';
-import type TerrainSourceCache from '../source/terrain_source_cache';
 import type {TerrainSpecification} from '../style-spec/types.g';
+import TileCache from '../source/tile_cache';
+import Tile from '../source/tile';
 
 describe('Terrain', () => {
     test('pointCoordiate should not return null', () => {
@@ -21,23 +22,24 @@ describe('Terrain', () => {
             }
         } as any as Style;
         const sourceCache = {
-            getTileByID: (tileID) => {
-                if (tileID !== 'abcd') {
-                    return null;
-                }
-                return {
-                    tileID: {
-                        canonical: {
-                            x: 0,
-                            y: 0,
-                            z: 0
-                        }
-                    }
-                };
+            _cache: {max: 100} as TileCache
+        } as SourceCache;
+        const getTileByID = (tileID) : Tile => {
+            if (tileID !== 'abcd') {
+                return null;
             }
-        } as any as TerrainSourceCache;
-        const terrain = new Terrain(style, {} as any as SourceCache, {} as any as TerrainSpecification);
-        terrain.sourceCache = sourceCache;
+            return {
+                tileID: {
+                    canonical: {
+                        x: 0,
+                        y: 0,
+                        z: 0
+                    }
+                }
+            };
+        };
+        const terrain = new Terrain(style, sourceCache, {} as any as TerrainSpecification);
+        terrain.sourceCache.getTileByID = getTileByID;
         const context = style.map.painter.context as Context;
         const pixels = new Uint8Array([0, 0, 255, 255]);
         const image = new RGBAImage({width: 1, height: 1}, pixels);

src/source/terrain_source_cache.ts

@@ -50,7 +50,7 @@ export default class TerrainSourceCache extends Evented {
         this.maxzoom = 22;
         this.tileSize = 512;
         this.deltaZoom = 1;
-        this.renderHistorySize = 150;
+        this.renderHistorySize = sourceCache._cache.max;
         sourceCache.usedForTerrain = true;
         sourceCache.tileSize = this.tileSize * 2 ** this.deltaZoom;
     }
@@ -98,15 +98,19 @@ export default class TerrainSourceCache extends Evented {
     removeOutdated(painter: Painter) {
         // create lookuptable for actual needed tiles
         const tileIDs = {};
+        // remove duplicates from renderHistory and chop to renderHistorySize
+        this.renderHistory = this.renderHistory.filter((i, p) => {
+            return this.renderHistory.indexOf(i) === p;
+        }).slice(0, this.renderHistorySize);
+        // fill lookuptable with current rendered tiles
         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);
+        // fill lookuptable with most recent rendered tiles outside the viewport
+        for (const key of this.renderHistory) tileIDs[key] = true;
         // 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];
+        for (const key in this._tiles) {
+            if (!tileIDs[key]) {
+                this._tiles[key].clearTextures(painter);
+                delete this._tiles[key];
             }
         }
     }