Upload one raster tile texture per render frame

src/source/raster_dem_tile_source.js

@@ -19,13 +19,15 @@ import type {RasterDEMSourceSpecification} from '../style-spec/types';
 
 class RasterDEMTileSource extends RasterTileSource implements Source {
     encoding: "mapbox" | "terrarium";
+    _textureQueue: Array<Object>;
 
     constructor(id: string, options: RasterDEMSourceSpecification, dispatcher: Dispatcher, eventedParent: Evented) {
         super(id, options, dispatcher, eventedParent);
         this.type = 'raster-dem';
         this.maxzoom = 22;
         this._options = extend({}, options);
         this.encoding = options.encoding || "mapbox";
+        this._textureQueue = [];
     }
 
     serialize() {
@@ -56,19 +58,23 @@ class RasterDEMTileSource extends RasterTileSource implements Source {
                 if (this.map._refreshExpiredTiles) tile.setExpiryData(img);
                 delete (img: any).cacheControl;
                 delete (img: any).expires;
+                this._textureQueue.push({tileKey: tile.tileID.key, img, callback: textureCallback.bind(this)});
+                callback(null);
+            }
+        }
 
-                const rawImageData = browser.getImageData(img);
-                const params = {
-                    uid: tile.uid,
-                    coord: tile.tileID,
-                    source: this.id,
-                    rawImageData,
-                    encoding: this.encoding
-                };
-
-                if (!tile.workerID || tile.state === 'expired') {
-                    tile.workerID = this.dispatcher.send('loadDEMTile', params, done.bind(this));
-                }
+        function textureCallback(tile, img) {
+            const rawImageData = browser.getImageData(img);
+            const params = {
+                uid: tile.uid,
+                coord: tile.tileID,
+                source: this.id,
+                rawImageData,
+                encoding: this.encoding
+            };
+
+            if (!tile.workerID || tile.state === 'expired') {
+                tile.workerID = this.dispatcher.send('loadDEMTile', params, done.bind(this));
             }
         }
 

src/source/raster_tile_source.js

@@ -36,6 +36,7 @@ class RasterTileSource extends Evented implements Source {
     dispatcher: Dispatcher;
     map: Map;
     tiles: Array<string>;
+    _textureQueue: Array<Object>;
 
     _loaded: boolean;
     _options: RasterSourceSpecification | RasterDEMSourceSpecification;
@@ -54,6 +55,7 @@ class RasterTileSource extends Evented implements Source {
         this.scheme = 'xyz';
         this.tileSize = 512;
         this._loaded = false;
+        this._textureQueue = [];
 
         this._options = extend({}, options);
         extend(this, pick(options, ['url', 'scheme', 'tileSize']));
@@ -103,6 +105,7 @@ class RasterTileSource extends Evented implements Source {
 
     loadTile(tile: Tile, callback: Callback<void>) {
         const url = normalizeURL(tile.tileID.canonical.url(this.tiles, this.scheme), this.url, this.tileSize);
+
         tile.request = getImage(this.map._transformRequest(url, ResourceType.Tile), (err, img) => {
             delete tile.request;
 
@@ -117,6 +120,11 @@ class RasterTileSource extends Evented implements Source {
                 delete (img: any).cacheControl;
                 delete (img: any).expires;
 
+                this._textureQueue.push({tileKey: tile.tileID.key, img, callback: textureCallback.bind(this)});
+                callback(null);
+            }
+
+            function textureCallback (tile, img) {
                 const context = this.map.painter.context;
                 const gl = context.gl;
                 tile.texture = this.map.painter.getTileTexture(img.width);
@@ -132,8 +140,6 @@ class RasterTileSource extends Evented implements Source {
                 }
 
                 tile.state = 'loaded';
-
-                callback(null);
             }
         });
     }

src/source/source.js

@@ -48,6 +48,7 @@ export interface Source {
     tileID?: CanonicalTileID;
     reparseOverscaled?: boolean,
     vectorLayerIds?: Array<string>,
+    _textureQueue?: Array<Object>;
 
     hasTransition(): boolean;
 

src/ui/map.js

@@ -1682,6 +1682,34 @@ class Map extends Camera {
 
         this._placementDirty = this.style && this.style._updatePlacement(this.painter.transform, this.showCollisionBoxes, this._fadeDuration, this._crossSourceCollisions);
 
+        // For performance reasons, we limit texture uploading to the GPU to
+        // a max of two uploads per animation frame
+        let continueRenderingTextures = false;
+        const sources = this.style && this.style.sourceCaches;
+        for (const id in sources) {
+            const cache = sources[id];
+            const source = cache._source;
+            if ((source.type === 'raster' || source.type === 'raster-dem')) {
+                const textureQueue = Array.isArray(source._textureQueue) ? source._textureQueue : [];
+                const max = Math.min(2, textureQueue.length);
+                for (let i = 0; i < max; i++) {
+                    const queued = textureQueue.shift();
+                    if (queued) {
+                        const {tileKey, img, callback} = queued;
+                        const tile = cache.getTileByID(tileKey);
+                        // do not upload aborted tiles to the GPU
+                        if (tile && !tile.aborted) {
+                            console.log('create texture', textureQueue.length);
+                            callback(tile, img);
+                        }
+                        if (textureQueue.length > 0) {
+                            continueRenderingTextures = true;
+                        }
+                    }
+                }
+            }
+        }
+
         // Actually draw
         this.painter.render(this.style, {
             showTileBoundaries: this.showTileBoundaries,
@@ -1715,7 +1743,7 @@ class Map extends Camera {
         // Even though `_styleDirty` and `_sourcesDirty` are reset in this
         // method, synchronous events fired during Style#update or
         // Style#_updateSources could have caused them to be set again.
-        if (this._sourcesDirty || this._repaint || this._styleDirty || this._placementDirty) {
+        if (this._sourcesDirty || this._repaint || this._styleDirty || this._placementDirty || continueRenderingTextures) {
             this.triggerRepaint();
         } else if (!this.isMoving() && this.loaded()) {
             this.fire(new Event('idle'));