Factor out ImageTile and ImageTileSource

src/ol/renderer/webgl/webglmaprenderer.js

@@ -17,6 +17,7 @@ goog.require('goog.events.EventType');
 goog.require('goog.functions');
 goog.require('goog.style');
 goog.require('goog.webgl');
+goog.require('ol.Tile');
 goog.require('ol.layer.Layer');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.renderer.webgl.FragmentShader');
@@ -219,15 +220,15 @@ ol.renderer.webgl.Map.prototype.addLayer = function(layer) {
 
 
 /**
- * @param {Image} image Image.
+ * @param {ol.Tile} tile Tile.
  * @param {number} magFilter Mag filter.
  * @param {number} minFilter Min filter.
  */
-ol.renderer.webgl.Map.prototype.bindImageTexture =
-    function(image, magFilter, minFilter) {
+ol.renderer.webgl.Map.prototype.bindTileTexture =
+    function(tile, magFilter, minFilter) {
   var gl = this.getGL();
-  var imageKey = image.src;
-  var textureCacheEntry = this.textureCache_[imageKey];
+  var tileKey = tile.getKey();
+  var textureCacheEntry = this.textureCache_[tileKey];
   if (goog.isDef(textureCacheEntry)) {
     gl.bindTexture(goog.webgl.TEXTURE_2D, textureCacheEntry.texture);
     if (textureCacheEntry.magFilter != magFilter) {
@@ -244,7 +245,7 @@ ol.renderer.webgl.Map.prototype.bindImageTexture =
     var texture = gl.createTexture();
     gl.bindTexture(goog.webgl.TEXTURE_2D, texture);
     gl.texImage2D(goog.webgl.TEXTURE_2D, 0, goog.webgl.RGBA, goog.webgl.RGBA,
-        goog.webgl.UNSIGNED_BYTE, image);
+        goog.webgl.UNSIGNED_BYTE, tile.getImage());
     gl.texParameteri(
         goog.webgl.TEXTURE_2D, goog.webgl.TEXTURE_MAG_FILTER, magFilter);
     gl.texParameteri(
@@ -253,7 +254,7 @@ ol.renderer.webgl.Map.prototype.bindImageTexture =
         goog.webgl.CLAMP_TO_EDGE);
     gl.texParameteri(goog.webgl.TEXTURE_2D, goog.webgl.TEXTURE_WRAP_T,
         goog.webgl.CLAMP_TO_EDGE);
-    this.textureCache_[imageKey] = {
+    this.textureCache_[tileKey] = {
       texture: texture,
       magFilter: magFilter,
       minFilter: minFilter
@@ -485,11 +486,11 @@ ol.renderer.webgl.Map.prototype.initializeGL_ = function() {
 
 
 /**
- * @param {Image} image Image.
- * @return {boolean} Is image texture loaded.
+ * @param {ol.Tile} tile Tile.
+ * @return {boolean} Is tile texture loaded.
  */
-ol.renderer.webgl.Map.prototype.isImageTextureLoaded = function(image) {
-  return image.src in this.textureCache_;
+ol.renderer.webgl.Map.prototype.isTileTextureLoaded = function(tile) {
+  return tile.getKey() in this.textureCache_;
 };
 
 

src/ol/renderer/webgl/webgltilelayerrenderer.js

@@ -386,9 +386,9 @@ ol.renderer.webgl.TileLayer.prototype.renderFrame = function(time) {
     var tilesToDrawByZ = {};
 
     /**
-     * @type {Array.<Image>}
+     * @type {Array.<ol.Tile>}
      */
-    var imagesToLoad = [];
+    var tilesToLoad = [];
 
     var allTilesLoaded = true;
 
@@ -405,12 +405,11 @@ ol.renderer.webgl.TileLayer.prototype.renderFrame = function(time) {
       if (tileState == ol.TileState.IDLE) {
         tile.load();
       } else if (tileState == ol.TileState.LOADED) {
-        var image = tile.getImage();
-        if (mapRenderer.isImageTextureLoaded(image)) {
+        if (mapRenderer.isTileTextureLoaded(tile)) {
           tilesToDrawByZ[z][tileCoord.toString()] = tile;
           return;
         } else {
-          imagesToLoad.push(image);
+          tilesToLoad.push(tile);
         }
       } else if (tileState == ol.TileState.ERROR) {
         return;
@@ -459,29 +458,28 @@ ol.renderer.webgl.TileLayer.prototype.renderFrame = function(time) {
             framebufferExtentSize.height - 1;
         goog.vec.Vec4.setFromValues(uTileOffset, sx, sy, tx, ty);
         gl.uniform4fv(this.locations_.uTileOffset, uTileOffset);
-        mapRenderer.bindImageTexture(
-            tile.getImage(), goog.webgl.LINEAR, goog.webgl.LINEAR);
+        mapRenderer.bindTileTexture(tile, goog.webgl.LINEAR, goog.webgl.LINEAR);
         gl.drawArrays(goog.webgl.TRIANGLE_STRIP, 0, 4);
       }, this);
     }, this);
 
-    if (!goog.array.isEmpty(imagesToLoad)) {
+    if (!goog.array.isEmpty(tilesToLoad)) {
       goog.events.listenOnce(
           map,
           ol.MapEventType.POSTRENDER,
-          goog.partial(function(mapRenderer, imagesToLoad) {
+          goog.partial(function(mapRenderer, tilesToLoad) {
             if (goog.DEBUG) {
               this.logger.info(
-                  'uploading ' + imagesToLoad.length + ' textures');
+                  'uploading ' + tilesToLoad.length + ' textures');
             }
-            goog.array.forEach(imagesToLoad, function(image) {
-              mapRenderer.bindImageTexture(
-                  image, goog.webgl.LINEAR, goog.webgl.LINEAR);
+            goog.array.forEach(tilesToLoad, function(tile) {
+              mapRenderer.bindTileTexture(
+                  tile, goog.webgl.LINEAR, goog.webgl.LINEAR);
             });
             if (goog.DEBUG) {
               this.logger.info('uploaded textures');
             }
-          }, mapRenderer, imagesToLoad));
+          }, mapRenderer, tilesToLoad));
     }
 
     if (allTilesLoaded) {