Avoid re-rendering framebuffer in simple cases

src/ol/renderer/webgl/tilelayer.js

@@ -154,6 +154,18 @@ ol.renderer.webgl.TileLayer = function(mapRenderer, tileLayer) {
    */
   this.matrix_ = goog.vec.Mat4.createNumber();
 
+  /**
+   * @private
+   * @type {ol.TileRange}
+   */
+  this.renderedTileRange_ = null;
+
+  /**
+   * @private
+   * @type {ol.Extent}
+   */
+  this.renderedFramebufferExtent_ = null;
+
 };
 goog.inherits(ol.renderer.webgl.TileLayer, ol.renderer.webgl.Layer);
 
@@ -310,6 +322,16 @@ ol.renderer.webgl.TileLayer.prototype.render = function() {
   var tileResolution = tileGrid.getResolution(z);
   var tileRange = tileGrid.getTileRangeForExtentAndResolution(
       mapRotatedExtent, tileResolution);
+
+  var framebufferExtent;
+
+  if (!goog.isNull(this.renderedTileRange_) &&
+      this.renderedTileRange_.equals(tileRange)) {
+    this.logger.info('skipping re-render');
+    framebufferExtent = this.renderedFramebufferExtent_;
+  } else {
+    this.logger.info('re-render');
+
     var tileRangeSize = tileRange.getSize();
     var tileSize = tileGrid.getTileSize();
 
@@ -324,7 +346,7 @@ ol.renderer.webgl.TileLayer.prototype.render = function() {
     var origin = tileGrid.getOrigin(z);
     var minX = origin.x + tileRange.minX * tileSize.width * tileResolution;
     var minY = origin.y + tileRange.minY * tileSize.height * tileResolution;
-  var framebufferExtent = new ol.Extent(
+    framebufferExtent = new ol.Extent(
         minX,
         minY,
         minX + framebufferExtentSize.width,
@@ -381,6 +403,8 @@ ol.renderer.webgl.TileLayer.prototype.render = function() {
      */
     var imagesToLoad = [];
 
+    var allTilesLoaded = true;
+
     tilesToDrawByZ[z] = {};
     tileRange.forEachTileCoord(z, function(tileCoord) {
 
@@ -394,6 +418,7 @@ ol.renderer.webgl.TileLayer.prototype.render = function() {
           return;
         } else {
           imagesToLoad.push(tile.getImage());
+          allTilesLoaded = false;
         }
       } else {
         var tileKey = goog.getUid(tile);
@@ -403,6 +428,7 @@ ol.renderer.webgl.TileLayer.prototype.render = function() {
           this.tileChangeListenerKeys_[tileKey] = goog.events.listen(tile,
               goog.events.EventType.CHANGE, this.handleTileChange, false, this);
         }
+        allTilesLoaded = false;
       }
 
       // FIXME this could be more efficient about filling partial holes
@@ -452,6 +478,32 @@ ol.renderer.webgl.TileLayer.prototype.render = function() {
       }, this);
     }, this);
 
+    if (!goog.array.isEmpty(imagesToLoad)) {
+      goog.events.listenOnce(
+          map,
+          ol.MapEventType.POST_RENDER,
+          goog.partial(function(mapRenderer, imagesToLoad) {
+            if (goog.DEBUG) {
+              this.logger.info('uploading textures');
+            }
+            goog.array.forEach(imagesToLoad, function(image) {
+              mapRenderer.bindImageTexture(
+                  image, goog.webgl.LINEAR, goog.webgl.LINEAR);
+            });
+          }, mapRenderer, imagesToLoad));
+      animate = true;
+    }
+
+    if (allTilesLoaded) {
+      this.renderedTileRange_ = tileRange;
+      this.renderedFramebufferExtent_ = framebufferExtent;
+    } else {
+      this.renderedTileRange_ = null;
+      this.renderedFramebufferExtent_ = null;
+    }
+
+  }
+
   goog.vec.Mat4.makeIdentity(this.matrix_);
   goog.vec.Mat4.translate(this.matrix_,
       (mapCenter.x - framebufferExtent.minX) /
@@ -477,22 +529,6 @@ ol.renderer.webgl.TileLayer.prototype.render = function() {
       -0.5,
       0);
 
-  if (!goog.array.isEmpty(imagesToLoad)) {
-    goog.events.listenOnce(
-        map,
-        ol.MapEventType.POST_RENDER,
-        goog.partial(function(mapRenderer, imagesToLoad) {
-          if (goog.DEBUG) {
-            this.logger.info('uploading textures');
-          }
-          goog.array.forEach(imagesToLoad, function(image) {
-            mapRenderer.bindImageTexture(
-                image, goog.webgl.LINEAR, goog.webgl.LINEAR);
-          });
-        }, mapRenderer, imagesToLoad));
-    animate = true;
-  }
-
   return animate;
 
 };