s/ol3/ol/

src/ol/renderer/dom/dom.js

@@ -0,0 +1,9 @@
+goog.provide('ol.renderer.dom');
+
+goog.require('goog.functions');
+
+
+/**
+ * @return {boolean} Is supported.
+ */
+ol.renderer.dom.isSupported = goog.functions.TRUE;

src/ol/renderer/dom/layer.js

@@ -0,0 +1,85 @@
+goog.provide('ol.renderer.dom.Layer');
+
+goog.require('ol.Coordinate');
+goog.require('ol.renderer.Layer');
+
+
+
+/**
+ * @constructor
+ * @extends {ol.renderer.Layer}
+ * @param {ol.renderer.Map} mapRenderer Map renderer.
+ * @param {ol.Layer} layer Layer.
+ * @param {!Element} target Target.
+ */
+ol.renderer.dom.Layer = function(mapRenderer, layer, target) {
+  goog.base(this, mapRenderer, layer);
+
+  /**
+   * @type {!Element}
+   * @protected
+   */
+  this.target = target;
+
+  /**
+   * Top left corner of the target in map coords.
+   *
+   * @type {ol.Coordinate}
+   * @protected
+   */
+  this.origin = null;
+
+  this.handleLayerOpacityChange();
+  this.handleLayerVisibleChange();
+
+};
+goog.inherits(ol.renderer.dom.Layer, ol.renderer.Layer);
+
+
+/**
+ * @inheritDoc
+ * @return {ol.renderer.Map} Map renderer.
+ */
+ol.renderer.dom.Layer.prototype.getMapRenderer = function() {
+  return /** @type {ol.renderer.dom.Map} */ goog.base(this, 'getMapRenderer');
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.dom.Layer.prototype.handleLayerLoad = function() {
+  this.getMap().render();
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.dom.Layer.prototype.handleLayerOpacityChange = function() {
+  goog.style.setOpacity(this.target, this.getLayer().getOpacity());
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.dom.Layer.prototype.handleLayerVisibleChange = function() {
+  goog.style.showElement(this.target, this.getLayer().getVisible());
+};
+
+
+/**
+ * Render.
+ */
+ol.renderer.dom.Layer.prototype.render = goog.abstractMethod;
+
+
+/**
+ * Set the location of the top left corner of the target.
+ *
+ * @param {ol.Coordinate} origin Origin.
+ */
+ol.renderer.dom.Layer.prototype.setOrigin = function(origin) {
+  this.origin = origin;
+};

src/ol/renderer/dom/map.js

@@ -0,0 +1,169 @@
+goog.provide('ol.renderer.dom.Map');
+
+goog.require('goog.asserts');
+goog.require('goog.dom');
+goog.require('goog.dom.TagName');
+goog.require('goog.style');
+goog.require('ol.Coordinate');
+goog.require('ol.Map');
+goog.require('ol.TileLayer');
+goog.require('ol.renderer.Map');
+goog.require('ol.renderer.dom.TileLayer');
+
+
+
+/**
+ * @constructor
+ * @extends {ol.renderer.Map}
+ * @param {Element} container Container.
+ * @param {ol.Map} map Map.
+ */
+ol.renderer.dom.Map = function(container, map) {
+
+  goog.base(this, container, map);
+
+  /**
+   * @type {!Element}
+   * @private
+   */
+  this.layersPane_ = goog.dom.createElement(goog.dom.TagName.DIV);
+  this.layersPane_.className = 'ol-layers-pane';
+  this.layersPane_.style.position = 'absolute';
+  goog.dom.appendChild(container, this.layersPane_);
+
+  /**
+   * @type {Object}
+   * @private
+   */
+  this.layerPanes_ = {};
+
+  /**
+   * @type {ol.Coordinate|undefined}
+   * @private
+   */
+  this.renderedCenter_ = undefined;
+
+  /**
+   * The pixel offset of the layers pane with respect to its container.
+   *
+   * @type {ol.Coordinate}
+   * @private
+   */
+  this.layersPaneOffset_ = null;
+};
+goog.inherits(ol.renderer.dom.Map, ol.renderer.Map);
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.dom.Map.prototype.createLayerRenderer = function(layer) {
+
+  if (layer instanceof ol.TileLayer) {
+
+    var layerPane = goog.dom.createElement(goog.dom.TagName.DIV);
+    layerPane.className = 'ol-layer';
+    layerPane.style.position = 'absolute';
+    goog.dom.appendChild(this.layersPane_, layerPane);
+
+    var layerRenderer = new ol.renderer.dom.TileLayer(this, layer, layerPane);
+
+    this.layerPanes_[goog.getUid(layerRenderer)] = layerPane;
+
+    return layerRenderer;
+
+  } else {
+    goog.asserts.assert(false);
+    return null;
+  }
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.dom.Map.prototype.handleCenterChanged = function() {
+  goog.base(this, 'handleCenterChanged');
+  var map = this.getMap();
+  if (!map.isDef()) {
+    return;
+  }
+  // FIXME: shiftLayersPane_ and resetLayersPane_ should be called
+  // elsewhere as we may be frozen here
+  if (goog.isDef(this.renderedCenter_)) {
+    this.shiftLayersPane_();
+  } else {
+    this.resetLayersPane_();
+  }
+  map.render();
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.dom.Map.prototype.handleResolutionChanged = function() {
+  goog.base(this, 'handleResolutionChanged');
+  var map = this.getMap();
+  if (!map.isDef()) {
+    return;
+  }
+  // FIXME: resetLayersPane_ should be called
+  // elsewhere as we may be frozen here
+  this.resetLayersPane_();
+  map.render();
+};
+
+
+/**
+ * Reset the layers pane to its initial position.
+ * @private
+ */
+ol.renderer.dom.Map.prototype.resetLayersPane_ = function() {
+  var offset = new ol.Coordinate(0, 0);
+  goog.style.setPosition(this.layersPane_, offset);
+
+  this.layersPaneOffset_ = offset;
+  this.renderedCenter_ = this.map.getCenter();
+
+  this.setOrigin_();
+};
+
+
+/**
+ * Set the origin for each layer renderer.
+ * @private
+ */
+ol.renderer.dom.Map.prototype.setOrigin_ = function() {
+  var center = this.map.getCenter();
+  var resolution = this.map.getResolution();
+  var targetSize = this.map.getSize();
+  var targetWidth = targetSize.width;
+  var targetHeight = targetSize.height;
+  var origin = new ol.Coordinate(
+      center.x - resolution * targetWidth / 2,
+      center.y + resolution * targetHeight / 2);
+  goog.object.forEach(this.layerRenderers, function(layerRenderer) {
+    layerRenderer.setOrigin(origin);
+  });
+};
+
+
+/**
+ * Move the layers pane.
+ * @private
+ */
+ol.renderer.dom.Map.prototype.shiftLayersPane_ = function() {
+  var center = this.map.getCenter();
+  var oldCenter = this.renderedCenter_;
+  var resolution = this.map.getResolution();
+  var dx = Math.round((oldCenter.x - center.x) / resolution);
+  var dy = Math.round((center.y - oldCenter.y) / resolution);
+  if (!(dx === 0 && dy === 0)) {
+    var offset = this.layersPaneOffset_;
+    offset.x += Math.round((oldCenter.x - center.x) / resolution);
+    offset.y += Math.round((center.y - oldCenter.y) / resolution);
+    goog.style.setPosition(this.layersPane_, offset);
+    this.renderedCenter_ = center;
+  }
+};

src/ol/renderer/dom/tilelayer.js

@@ -0,0 +1,148 @@
+goog.provide('ol.renderer.dom.TileLayer');
+
+goog.require('goog.dom');
+goog.require('ol.Coordinate');
+goog.require('ol.Extent');
+goog.require('ol.renderer.dom.Layer');
+
+
+
+/**
+ * @constructor
+ * @extends {ol.renderer.dom.Layer}
+ * @param {ol.renderer.Map} mapRenderer Map renderer.
+ * @param {ol.TileLayer} tileLayer Tile layer.
+ * @param {!Element} target Target.
+ */
+ol.renderer.dom.TileLayer = function(mapRenderer, tileLayer, target) {
+  goog.base(this, mapRenderer, tileLayer, target);
+
+  /**
+   * @type {Object}
+   * @private
+   */
+  this.renderedTiles_ = {};
+
+  /**
+   * @type {number|undefined}
+   * @private
+   */
+  this.renderedMapResolution_ = undefined;
+};
+goog.inherits(ol.renderer.dom.TileLayer, ol.renderer.dom.Layer);
+
+
+/**
+ * @inheritDoc
+ * @return {ol.TileLayer} Layer.
+ */
+ol.renderer.dom.TileLayer.prototype.getLayer = function() {
+  return /** @type {ol.TileLayer} */ goog.base(this, 'getLayer');
+};
+
+
+/**
+ * Get the pixel offset between the tile origin and the container origin.
+ * @private
+ * @param {number} z Z.
+ * @param {number} resolution Resolution.
+ * @return {ol.Coordinate} Offset.
+ */
+ol.renderer.dom.TileLayer.prototype.getTileOffset_ = function(z, resolution) {
+  var tileLayer = this.getLayer();
+  var tileStore = tileLayer.getStore();
+  var tileGrid = tileStore.getTileGrid();
+  var tileOrigin = tileGrid.getOrigin(z);
+  var offset = new ol.Coordinate(
+      Math.round((this.origin.x - tileOrigin.x) / resolution),
+      Math.round((tileOrigin.y - this.origin.y) / resolution));
+  return offset;
+};
+
+
+/**
+ * Get rid of tiles outside the rendered extent.
+ * @private
+ * @param {ol.TileBounds} tileBounds Tile bounds.
+ * @param {number} z Z.
+ */
+ol.renderer.dom.TileLayer.prototype.removeInvisibleTiles_ = function(
+    tileBounds, z) {
+  var key, tileCoord, prune, tile;
+  for (key in this.renderedTiles_) {
+    tileCoord = ol.TileCoord.createFromString(key);
+    prune = z !== tileCoord.z ||
+            tileCoord.x < tileBounds.minX ||
+            tileCoord.x > tileBounds.maxX ||
+            tileCoord.y < tileBounds.minY ||
+            tileCoord.y > tileBounds.maxY;
+    if (prune) {
+      tile = this.renderedTiles_[key];
+      delete this.renderedTiles_[key];
+      goog.dom.removeNode(tile.getImage(this));
+    }
+  }
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.dom.TileLayer.prototype.render = function() {
+
+  var map = this.getMap();
+  if (!map.isDef()) {
+    return;
+  }
+  var mapExtent = /** @type {!ol.Extent} */ map.getExtent();
+  var mapResolution = /** @type {number} */ map.getResolution();
+
+  var tileLayer = this.getLayer();
+  var tileStore = tileLayer.getStore();
+  var tileGrid = tileStore.getTileGrid();
+
+  if (mapResolution != this.renderedMapResolution_) {
+    this.renderedTiles_ = {};
+    goog.dom.removeChildren(this.target);
+  }
+
+  // z represents the "best" resolution
+  var z = tileGrid.getZForResolution(mapResolution);
+
+  var tileBounds =
+      tileGrid.getTileBoundsForExtentAndResolution(mapExtent, mapResolution);
+  var tileOffset = this.getTileOffset_(z, mapResolution);
+
+  var fragment = document.createDocumentFragment();
+
+  var key, tile, pixelBounds, img, newTiles = false;
+  tileBounds.forEachTileCoord(z, function(tileCoord) {
+    key = tileCoord.toString();
+    tile = this.renderedTiles_[key];
+    if (!goog.isDef(tile)) {
+      tile = tileStore.getTile(tileCoord);
+      if (goog.isNull(tile)) {
+      } else {
+        tile.load();
+        this.renderedTiles_[key] = tile;
+        pixelBounds = tileGrid.getPixelBoundsForTileCoordAndResolution(
+            tileCoord, mapResolution);
+        img = tile.getImage(this);
+        img.style.position = 'absolute';
+        img.style.left = (pixelBounds.minX - tileOffset.x) + 'px';
+        img.style.top = (-pixelBounds.maxY - tileOffset.y) + 'px';
+        img.style.width = pixelBounds.getWidth() + 'px';
+        img.style.height = pixelBounds.getHeight() + 'px';
+        goog.dom.appendChild(fragment, img);
+        newTiles = true;
+      }
+    }
+  }, this);
+
+  if (newTiles) {
+    goog.dom.appendChild(this.target, fragment);
+  }
+
+  this.removeInvisibleTiles_(tileBounds, z);
+  this.renderedMapResolution_ = mapResolution;
+};

src/ol/renderer/layer.js

@@ -0,0 +1,127 @@
+goog.provide('ol.renderer.Layer');
+
+goog.require('goog.events');
+goog.require('goog.events.EventType');
+goog.require('ol.Layer');
+goog.require('ol.LayerProperty');
+goog.require('ol.Object');
+
+
+
+/**
+ * @constructor
+ * @extends {ol.Object}
+ * @param {ol.renderer.Map} mapRenderer Map renderer.
+ * @param {ol.Layer} layer Layer.
+ */
+ol.renderer.Layer = function(mapRenderer, layer) {
+
+  goog.base(this);
+
+  /**
+   * @private
+   * @type {ol.renderer.Map}
+   */
+  this.mapRenderer_ = mapRenderer;
+
+  /**
+   * @private
+   * @type {ol.Layer}
+   */
+  this.layer_ = layer;
+
+  goog.events.listen(this.layer_,
+      ol.Object.getChangedEventType(ol.LayerProperty.BRIGHTNESS),
+      this.handleLayerBrightnessChange, false, this);
+
+  goog.events.listen(this.layer_,
+      ol.Object.getChangedEventType(ol.LayerProperty.CONTRAST),
+      this.handleLayerContrastChange, false, this);
+
+  goog.events.listen(this.layer_,
+      ol.Object.getChangedEventType(ol.LayerProperty.HUE),
+      this.handleLayerHueChange, false, this);
+
+  goog.events.listen(this.layer_, goog.events.EventType.LOAD,
+      this.handleLayerLoad, false, this);
+
+  goog.events.listen(this.layer_,
+      ol.Object.getChangedEventType(ol.LayerProperty.OPACITY),
+      this.handleLayerOpacityChange, false, this);
+
+  goog.events.listen(this.layer_,
+      ol.Object.getChangedEventType(ol.LayerProperty.SATURATION),
+      this.handleLayerSaturationChange, false, this);
+
+  goog.events.listen(this.layer_,
+      ol.Object.getChangedEventType(ol.LayerProperty.VISIBLE),
+      this.handleLayerVisibleChange, false, this);
+
+};
+goog.inherits(ol.renderer.Layer, ol.Object);
+
+
+/**
+ * @return {ol.Layer} Layer.
+ */
+ol.renderer.Layer.prototype.getLayer = function() {
+  return this.layer_;
+};
+
+
+/**
+ * @return {ol.Map} Map.
+ */
+ol.renderer.Layer.prototype.getMap = function() {
+  return this.mapRenderer_.getMap();
+};
+
+
+/**
+ * @return {ol.renderer.Map} Map renderer.
+ */
+ol.renderer.Layer.prototype.getMapRenderer = function() {
+  return this.mapRenderer_;
+};
+
+
+/**
+ * @protected
+ */
+ol.renderer.Layer.prototype.handleLayerBrightnessChange = goog.nullFunction;
+
+
+/**
+ * @protected
+ */
+ol.renderer.Layer.prototype.handleLayerContrastChange = goog.nullFunction;
+
+
+/**
+ * @protected
+ */
+ol.renderer.Layer.prototype.handleLayerHueChange = goog.nullFunction;
+
+
+/**
+ * @protected
+ */
+ol.renderer.Layer.prototype.handleLayerLoad = goog.nullFunction;
+
+
+/**
+ * @protected
+ */
+ol.renderer.Layer.prototype.handleLayerOpacityChange = goog.nullFunction;
+
+
+/**
+ * @protected
+ */
+ol.renderer.Layer.prototype.handleLayerSaturationChange = goog.nullFunction;
+
+
+/**
+ * @protected
+ */
+ol.renderer.Layer.prototype.handleLayerVisibleChange = goog.nullFunction;

src/ol/renderer/map.js

@@ -0,0 +1,377 @@
+goog.provide('ol.renderer.Map');
+
+goog.require('goog.Disposable');
+goog.require('goog.events');
+goog.require('goog.fx.anim');
+goog.require('goog.fx.anim.Animated');
+goog.require('goog.vec.Mat4');
+goog.require('ol.Map');
+goog.require('ol.MapProperty');
+
+
+
+/**
+ * @constructor
+ * @extends {goog.Disposable}
+ * @param {Element} container Container.
+ * @param {ol.Map} map Map.
+ */
+ol.renderer.Map = function(container, map) {
+
+  goog.base(this);
+
+  /**
+   * @private
+   * @type {Element}
+   */
+  this.container_ = container;
+
+  /**
+   * @protected
+   * @type {ol.Map}
+   */
+  this.map = map;
+
+  /**
+   * @protected
+   * @type {Object.<number, ol.renderer.Layer>}
+   */
+  this.layerRenderers = {};
+
+  /**
+   * @private
+   * @type {Array.<number>}
+   */
+  this.layersListenerKeys_ = null;
+
+  /**
+   * @private
+   * @type {goog.vec.Mat4.Number}
+   */
+  this.coordinateToPixelMatrix_ = goog.vec.Mat4.createNumber();
+
+  /**
+   * @private
+   * @type {goog.vec.Mat4.Number}
+   */
+  this.pixelToCoordinateMatrix_ = goog.vec.Mat4.createNumber();
+
+  /**
+   * @private
+   * @type {boolean}
+   */
+  this.matricesDirty_ = true;
+
+  /**
+   * @private
+   * @type {Array.<number>}
+   */
+  this.mapListenerKeys_ = [
+    goog.events.listen(
+        map, ol.Object.getChangedEventType(ol.MapProperty.BACKGROUND_COLOR),
+        this.handleBackgroundColorChanged, false, this),
+
+    goog.events.listen(
+        map, ol.Object.getChangedEventType(ol.MapProperty.CENTER),
+        this.handleCenterChanged, false, this),
+
+    goog.events.listen(
+        map, ol.Object.getChangedEventType(ol.MapProperty.LAYERS),
+        this.handleLayersChanged, false, this),
+
+    goog.events.listen(
+        map, ol.Object.getChangedEventType(ol.MapProperty.RESOLUTION),
+        this.handleResolutionChanged, false, this),
+
+    goog.events.listen(
+        map, ol.Object.getChangedEventType(ol.MapProperty.ROTATION),
+        this.handleRotationChanged, false, this),
+
+    goog.events.listen(
+        map, ol.Object.getChangedEventType(ol.MapProperty.SIZE),
+        this.handleSizeChanged, false, this)
+  ];
+
+};
+goog.inherits(ol.renderer.Map, goog.Disposable);
+
+
+/**
+ * @param {ol.Layer} layer Layer.
+ * @protected
+ */
+ol.renderer.Map.prototype.addLayer = function(layer) {
+  var layerRenderer = this.createLayerRenderer(layer);
+  this.setLayerRenderer(layer, layerRenderer);
+};
+
+
+/**
+ * @return {boolean} Can rotate.
+ */
+ol.renderer.Map.prototype.canRotate = goog.functions.FALSE;
+
+
+/**
+ * @param {ol.Layer} layer Layer.
+ * @protected
+ * @return {ol.renderer.Layer} layerRenderer Layer renderer.
+ */
+ol.renderer.Map.prototype.createLayerRenderer = goog.abstractMethod;
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.Map.prototype.disposeInternal = function() {
+  goog.object.forEach(this.layerRenderers, function(layerRenderer) {
+    goog.dispose(layerRenderer);
+  });
+  goog.array.forEach(this.mapListenerKeys_, goog.events.unlistenByKey);
+  if (!goog.isNull(this.layersListenerKeys_)) {
+    goog.array.forEach(this.layersListenerKeys_, goog.events.unlistenByKey);
+  }
+  goog.base(this, 'disposeInternal');
+};
+
+
+/**
+ * @param {function(this: T, ol.Layer, ol.renderer.Layer, number)} f Function.
+ * @param {T=} opt_obj Object.
+ * @template T
+ */
+ol.renderer.Map.prototype.forEachReadyVisibleLayer = function(f, opt_obj) {
+  var layers = this.map.getLayers();
+  layers.forEach(function(layer, index) {
+    if (layer.isReady() && layer.getVisible()) {
+      var layerRenderer = this.getLayerRenderer(layer);
+      f.call(opt_obj, layer, layerRenderer, index);
+    }
+  }, this);
+};
+
+
+/**
+ * @param {ol.Pixel} pixel Pixel.
+ * @return {ol.Coordinate} Coordinate.
+ */
+ol.renderer.Map.prototype.getCoordinateFromPixel = function(pixel) {
+  this.updateMatrices_();
+  var vec3 = [pixel.x, pixel.y, 0];
+  goog.vec.Mat4.multVec3(this.pixelToCoordinateMatrix_, vec3, vec3);
+  return new ol.Coordinate(vec3[0], vec3[1]);
+};
+
+
+/**
+ * @param {ol.Layer} layer Layer.
+ * @protected
+ * @return {ol.renderer.Layer} Layer renderer.
+ */
+ol.renderer.Map.prototype.getLayerRenderer = function(layer) {
+  var key = goog.getUid(layer);
+  var layerRenderer = this.layerRenderers[key];
+  goog.asserts.assert(goog.isDef(layerRenderer));
+  return layerRenderer;
+};
+
+
+/**
+ * @return {ol.Map} Map.
+ */
+ol.renderer.Map.prototype.getMap = function() {
+  return this.map;
+};
+
+
+/**
+ * @param {ol.Coordinate} coordinate Coordinate.
+ * @return {ol.Pixel} Pixel.
+ */
+ol.renderer.Map.prototype.getPixelFromCoordinate = function(coordinate) {
+  this.updateMatrices_();
+  var vec3 = [coordinate.x, coordinate.y, 0];
+  goog.vec.Mat4.multVec3(this.coordinateToPixelMatrix_, vec3, vec3);
+  return new ol.Pixel(vec3[0], vec3[1]);
+};
+
+
+/**
+ * Handle background color changed.
+ */
+ol.renderer.Map.prototype.handleBackgroundColorChanged = goog.nullFunction;
+
+
+/**
+ * @protected
+ */
+ol.renderer.Map.prototype.handleCenterChanged = function() {
+  this.matricesDirty_ = true;
+};
+
+
+/**
+ * @param {ol.CollectionEvent} collectionEvent Collection event.
+ * @protected
+ */
+ol.renderer.Map.prototype.handleLayersAdd = function(collectionEvent) {
+  var layer = /** @type {ol.Layer} */ collectionEvent.elem;
+  this.addLayer(layer);
+};
+
+
+/**
+ * @protected
+ */
+ol.renderer.Map.prototype.handleLayersChanged = function() {
+  var layerRenderers = goog.object.getValues(this.layerRenderers);
+  goog.array.forEach(layerRenderers, function(layerRenderer) {
+    this.removeLayerRenderer(layerRenderer);
+  }, this);
+  this.layerRenderers = {};
+  if (!goog.isNull(this.layersListenerKeys_)) {
+    goog.array.forEach(this.layersListenerKeys_, goog.events.unlistenByKey);
+    this.layersListenerKeys_ = null;
+  }
+  var layers = this.map.getLayers();
+  if (goog.isDefAndNotNull(layers)) {
+    layers.forEach(this.addLayer, this);
+    this.layersListenerKeys_ = [
+      goog.events.listen(layers, ol.CollectionEventType.ADD,
+          this.handleLayersAdd, false, this),
+      goog.events.listen(layers, ol.CollectionEventType.REMOVE,
+          this.handleLayersRemove, false, this)
+    ];
+  }
+};
+
+
+/**
+ * @param {ol.CollectionEvent} collectionEvent Collection event.
+ * @protected
+ */
+ol.renderer.Map.prototype.handleLayersRemove = function(collectionEvent) {
+  var layer = /** @type {ol.Layer} */ collectionEvent.elem;
+  this.removeLayer(layer);
+};
+
+
+/**
+ * @protected
+ */
+ol.renderer.Map.prototype.handleResolutionChanged = function() {
+  this.matricesDirty_ = true;
+};
+
+
+/**
+ * @protected
+ */
+ol.renderer.Map.prototype.handleRotationChanged = function() {
+  this.matricesDirty_ = true;
+};
+
+
+/**
+ * @protected
+ */
+ol.renderer.Map.prototype.handleSizeChanged = function() {
+  this.matricesDirty_ = true;
+};
+
+
+/**
+ * @param {ol.Layer} layer Layer.
+ * @protected
+ */
+ol.renderer.Map.prototype.removeLayer = function(layer) {
+  goog.dispose(this.removeLayerRenderer(layer));
+};
+
+
+/**
+ * @param {ol.Layer} layer Layer.
+ * @return {ol.renderer.Layer} Layer renderer.
+ * @protected
+ */
+ol.renderer.Map.prototype.removeLayerRenderer = function(layer) {
+  var key = goog.getUid(layer);
+  if (key in this.layerRenderers) {
+    var layerRenderer = this.layerRenderers[key];
+    delete this.layerRenderers[key];
+    return layerRenderer;
+  } else {
+    return null;
+  }
+};
+
+
+/**
+ * @return {boolean} Animating.
+ */
+ol.renderer.Map.prototype.render = function() {
+  var animate = false;
+  this.forEachReadyVisibleLayer(function(layer, layerRenderer) {
+    if (layerRenderer.render()) {
+      animate = true;
+    }
+  });
+  return animate;
+};
+
+
+/**
+ * @param {ol.Layer} layer Layer.
+ * @param {ol.renderer.Layer} layerRenderer Layer renderer.
+ * @protected
+ */
+ol.renderer.Map.prototype.setLayerRenderer = function(layer, layerRenderer) {
+  var key = goog.getUid(layer);
+  goog.asserts.assert(!(key in this.layerRenderers));
+  this.layerRenderers[key] = layerRenderer;
+};
+
+
+/**
+ * @private
+ */
+ol.renderer.Map.prototype.updateMatrices_ = function() {
+
+  if (this.matricesDirty_) {
+
+    var map = this.map;
+    var center = /** @type {!ol.Coordinate} */ map.getCenter();
+    var resolution = /** @type {number} */ map.getResolution();
+    var rotation = map.getRotation();
+    var size = /** @type {!ol.Size} */ map.getSize();
+
+    goog.vec.Mat4.makeIdentity(this.coordinateToPixelMatrix_);
+    goog.vec.Mat4.translate(this.coordinateToPixelMatrix_,
+        size.width / 2,
+        size.height / 2,
+        0);
+    goog.vec.Mat4.scale(this.coordinateToPixelMatrix_,
+        1 / resolution,
+        -1 / resolution,
+        1);
+    if (this.canRotate() && goog.isDef(rotation)) {
+      goog.vec.Mat4.rotate(this.coordinateToPixelMatrix_,
+          -rotation,
+          0,
+          0,
+          1);
+    }
+    goog.vec.Mat4.translate(this.coordinateToPixelMatrix_,
+        -center.x,
+        -center.y,
+        0);
+
+    var inverted = goog.vec.Mat4.invert(
+        this.coordinateToPixelMatrix_, this.pixelToCoordinateMatrix_);
+    goog.asserts.assert(inverted);
+
+    this.matricesDirty_ = false;
+
+  }
+
+};

src/ol/renderer/webgl/layer.js

@@ -0,0 +1,116 @@
+goog.provide('ol.renderer.webgl.Layer');
+
+goog.require('goog.vec.Mat4');
+goog.require('ol.Layer');
+goog.require('ol.renderer.Layer');
+
+
+
+/**
+ * @constructor
+ * @extends {ol.renderer.Layer}
+ * @param {ol.renderer.Map} mapRenderer Map renderer.
+ * @param {ol.Layer} layer Layer.
+ */
+ol.renderer.webgl.Layer = function(mapRenderer, layer) {
+  goog.base(this, mapRenderer, layer);
+};
+goog.inherits(ol.renderer.webgl.Layer, ol.renderer.Layer);
+
+
+/**
+ * @protected
+ */
+ol.renderer.webgl.Layer.prototype.dispatchChangeEvent = function() {
+  this.dispatchEvent(goog.events.EventType.CHANGE);
+};
+
+
+/**
+ * @inheritDoc
+ * @return {ol.renderer.Map} MapRenderer.
+ */
+ol.renderer.webgl.Layer.prototype.getMapRenderer = function() {
+  return /** @type {ol.renderer.webgl.Map} */ goog.base(
+      this, 'getMapRenderer');
+};
+
+
+/**
+ * @return {goog.vec.Mat4.AnyType} Matrix.
+ */
+ol.renderer.webgl.Layer.prototype.getMatrix = goog.abstractMethod;
+
+
+/**
+ * @return {WebGLTexture} Texture.
+ */
+ol.renderer.webgl.Layer.prototype.getTexture = goog.abstractMethod;
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.webgl.Layer.prototype.handleLayerBrightnessChange = function() {
+  this.dispatchChangeEvent();
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.webgl.Layer.prototype.handleLayerContrastChange = function() {
+  this.dispatchChangeEvent();
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.webgl.Layer.prototype.handleLayerHueChange = function() {
+  this.dispatchChangeEvent();
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.webgl.Layer.prototype.handleLayerLoad = function() {
+  this.dispatchChangeEvent();
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.webgl.Layer.prototype.handleLayerOpacityChange = function() {
+  this.dispatchChangeEvent();
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.webgl.Layer.prototype.handleLayerSaturationChange = function() {
+  this.dispatchChangeEvent();
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.webgl.Layer.prototype.handleLayerVisibleChange = function() {
+  this.dispatchChangeEvent();
+};
+
+
+/**
+ * Handle webglcontextlost.
+ */
+ol.renderer.webgl.Layer.prototype.handleWebGLContextLost = goog.nullFunction;
+
+
+/**
+ * Render.
+ */
+ol.renderer.webgl.Layer.prototype.render = goog.abstractMethod;

src/ol/renderer/webgl/map.js

@@ -0,0 +1,640 @@
+// FIXME clear textureCache
+// FIXME defer texture loads until after render when animating
+// FIXME generational tile texture garbage collector newFrame/get
+// FIXME defer cleanup until post-render
+// FIXME check against gl.getParameter(webgl.MAX_TEXTURE_SIZE)
+
+goog.provide('ol.renderer.webgl.Map');
+goog.provide('ol.renderer.webgl.map.shader');
+
+goog.require('goog.debug.Logger');
+goog.require('goog.dispose');
+goog.require('goog.dom');
+goog.require('goog.dom.TagName');
+goog.require('goog.events');
+goog.require('goog.events.Event');
+goog.require('goog.events.EventType');
+goog.require('goog.functions');
+goog.require('goog.style');
+goog.require('goog.webgl');
+goog.require('ol.Layer');
+goog.require('ol.Map');
+goog.require('ol.TileLayer');
+goog.require('ol.renderer.webgl.FragmentShader');
+goog.require('ol.renderer.webgl.TileLayer');
+goog.require('ol.renderer.webgl.VertexShader');
+goog.require('ol.webgl.WebGLContextEventType');
+
+
+/**
+ * @typedef {{magFilter: number, minFilter: number, texture: WebGLTexture}}
+ */
+ol.renderer.webgl.TextureCacheEntry;
+
+
+
+/**
+ * @constructor
+ * @extends {ol.renderer.webgl.FragmentShader}
+ * @see https://github.com/evanw/glfx.js/blob/master/src/filters/adjust/brightnesscontrast.js
+ * @see https://github.com/evanw/glfx.js/blob/master/src/filters/adjust/huesaturation.js
+ */
+ol.renderer.webgl.map.shader.Fragment = function() {
+  goog.base(this, [
+    'precision mediump float;',
+    '',
+    'uniform float uBrightness;',
+    'uniform float uContrast;',
+    'uniform float uHue;',
+    'uniform float uOpacity;',
+    'uniform mat4 uMatrix;',
+    'uniform float uSaturation;',
+    'uniform sampler2D uTexture;',
+    '',
+    'varying vec2 vTexCoord;',
+    '',
+    'void main(void) {',
+    '',
+    '  vec4 texCoord = uMatrix * vec4(vTexCoord, 0., 1.);',
+    '  vec4 color = texture2D(uTexture, texCoord.st);',
+    '',
+    '  if (uHue != 0.) {',
+    '    float angle = uHue * 3.14159265;',
+    '    float s = sin(angle), c = cos(angle);',
+    '    vec3 weights = (vec3(2. * c, -sqrt(3.) * s - c, sqrt(3.) * s - c)',
+    '                    + 1.) / 3.;',
+    '    color.rgb = vec3(',
+    '      dot(color.rgb, weights.xyz),',
+    '      dot(color.rgb, weights.zxy),',
+    '      dot(color.rgb, weights.yzx)',
+    '    );',
+    '  }',
+    '',
+    '  if (uSaturation != 0.) {',
+    '    float average = (color.r + color.g + color.b) / 3.;',
+    '    if (uSaturation > 0.) {',
+    '      color.rgb += (average - color.rgb)',
+    '                   * (1. - 1. / (1. - uSaturation));',
+    '    } else {',
+    '      color.rgb += (average - color.rgb) * -uSaturation;',
+    '    }',
+    '  }',
+    '',
+    '  color.rgb += uBrightness;',
+    '',
+    '  if (uContrast != 0.) {',
+    '    if (uContrast > 0.) {',
+    '      color.rgb = (color.rgb - 0.5) / (1. - uContrast) + 0.5;',
+    '    } else {',
+    '      color.rgb = (color.rgb - 0.5) * (1. + uContrast) + 0.5;',
+    '    }',
+    '  }',
+    '',
+    '  color.a = color.a * uOpacity;',
+    '',
+    '  gl_FragColor = color;',
+    '',
+    '}'
+  ].join('\n'));
+};
+goog.inherits(
+    ol.renderer.webgl.map.shader.Fragment, ol.renderer.webgl.FragmentShader);
+goog.addSingletonGetter(ol.renderer.webgl.map.shader.Fragment);
+
+
+
+/**
+ * @constructor
+ * @extends {ol.renderer.webgl.VertexShader}
+ */
+ol.renderer.webgl.map.shader.Vertex = function() {
+  goog.base(this, [
+    'attribute vec2 aPosition;',
+    'attribute vec2 aTexCoord;',
+    '',
+    'varying vec2 vTexCoord;',
+    '',
+    'void main(void) {',
+    '  gl_Position = vec4(aPosition, 0., 1.);',
+    '  vTexCoord = aTexCoord;',
+    '}'
+  ].join('\n'));
+};
+goog.inherits(
+    ol.renderer.webgl.map.shader.Vertex, ol.renderer.webgl.VertexShader);
+goog.addSingletonGetter(ol.renderer.webgl.map.shader.Vertex);
+
+
+
+/**
+ * @constructor
+ * @extends {ol.renderer.Map}
+ * @param {Element} container Container.
+ * @param {ol.Map} map Map.
+ */
+ol.renderer.webgl.Map = function(container, map) {
+
+  goog.base(this, container, map);
+
+  if (goog.DEBUG) {
+    /**
+     * @inheritDoc
+     */
+    this.logger = goog.debug.Logger.getLogger(
+        'ol.renderer.webgl.maprenderer.' + goog.getUid(this));
+  }
+
+  /**
+   * @private
+   * @type {Element}
+   */
+  this.canvas_ = goog.dom.createElement(goog.dom.TagName.CANVAS);
+  this.canvas_.height = container.clientHeight;
+  this.canvas_.width = container.clientWidth;
+  goog.dom.appendChild(container, this.canvas_);
+
+  /**
+   * @private
+   * @type {WebGLRenderingContext}
+   */
+  this.gl_ = this.canvas_.getContext('experimental-webgl', {
+    alpha: false,
+    antialias: true,
+    depth: false,
+    preserveDrawingBuffer: false,
+    stencil: false
+  });
+  goog.asserts.assert(!goog.isNull(this.gl_));
+
+  goog.events.listen(this.canvas_, ol.webgl.WebGLContextEventType.LOST,
+      this.handleWebGLContextLost, false, this);
+  goog.events.listen(this.canvas_, ol.webgl.WebGLContextEventType.RESTORED,
+      this.handleWebGLContextRestored, false, this);
+
+  /**
+   * @private
+   * @type {ol.Color}
+   */
+  this.clearColor_ = new ol.Color(1, 1, 1, 1);
+
+  /**
+   * @private
+   * @type {{aPosition: number,
+   *         aTexCoord: number,
+   *         uBrightness: WebGLUniformLocation,
+   *         uContrast: WebGLUniformLocation,
+   *         uHue: WebGLUniformLocation,
+   *         uMatrix: WebGLUniformLocation,
+   *         uOpacity: WebGLUniformLocation,
+   *         uSaturation: WebGLUniformLocation,
+   *         uTexture: WebGLUniformLocation}|null}
+   */
+  this.locations_ = null;
+
+  /**
+   * @private
+   * @type {WebGLBuffer}
+   */
+  this.arrayBuffer_ = null;
+
+  /**
+   * @private
+   * @type {Object.<number, WebGLShader>}
+   */
+  this.shaderCache_ = {};
+
+  /**
+   * @private
+   * @type {Object.<string, WebGLProgram>}
+   */
+  this.programCache_ = {};
+
+  /**
+   * @private
+   * @type {Object.<string, ol.renderer.webgl.TextureCacheEntry>}
+   */
+  this.textureCache_ = {};
+
+  /**
+   * @private
+   * @type {ol.renderer.webgl.FragmentShader}
+   */
+  this.fragmentShader_ = ol.renderer.webgl.map.shader.Fragment.getInstance();
+
+  /**
+   * @private
+   * @type {ol.renderer.webgl.VertexShader}
+   */
+  this.vertexShader_ = ol.renderer.webgl.map.shader.Vertex.getInstance();
+
+  /**
+   * @private
+   * @type {Object.<number, null|number>}
+   */
+  this.layerRendererChangeListenKeys_ = {};
+
+  this.initializeGL_();
+
+};
+goog.inherits(ol.renderer.webgl.Map, ol.renderer.Map);
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.webgl.Map.prototype.addLayer = function(layer) {
+  goog.base(this, 'addLayer', layer);
+  if (layer.getVisible()) {
+    this.getMap().render();
+  }
+};
+
+
+/**
+ * @param {Image} image Image.
+ * @param {number} magFilter Mag filter.
+ * @param {number} minFilter Min filter.
+ */
+ol.renderer.webgl.Map.prototype.bindImageTexture =
+    function(image, magFilter, minFilter) {
+  var gl = this.getGL();
+  var imageKey = image.src;
+  var textureCacheEntry = this.textureCache_[imageKey];
+  if (goog.isDef(textureCacheEntry)) {
+    gl.bindTexture(goog.webgl.TEXTURE_2D, textureCacheEntry.texture);
+    if (textureCacheEntry.magFilter != magFilter) {
+      gl.texParameteri(
+          goog.webgl.TEXTURE_2D, goog.webgl.TEXTURE_MAG_FILTER, magFilter);
+      textureCacheEntry.magFilter = magFilter;
+    }
+    if (textureCacheEntry.minFilter != minFilter) {
+      gl.texParameteri(
+          goog.webgl.TEXTURE_2D, goog.webgl.TEXTURE_MAG_FILTER, minFilter);
+      textureCacheEntry.minFilter = minFilter;
+    }
+  } else {
+    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);
+    gl.texParameteri(
+        goog.webgl.TEXTURE_2D, goog.webgl.TEXTURE_MAG_FILTER, magFilter);
+    gl.texParameteri(
+        goog.webgl.TEXTURE_2D, goog.webgl.TEXTURE_MIN_FILTER, minFilter);
+    gl.texParameteri(goog.webgl.TEXTURE_2D, goog.webgl.TEXTURE_WRAP_S,
+        goog.webgl.CLAMP_TO_EDGE);
+    gl.texParameteri(goog.webgl.TEXTURE_2D, goog.webgl.TEXTURE_WRAP_T,
+        goog.webgl.CLAMP_TO_EDGE);
+    this.textureCache_[imageKey] = {
+      texture: texture,
+      magFilter: magFilter,
+      minFilter: minFilter
+    };
+  }
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.webgl.Map.prototype.canRotate = goog.functions.TRUE;
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.webgl.Map.prototype.createLayerRenderer = function(layer) {
+  var gl = this.getGL();
+  if (layer instanceof ol.TileLayer) {
+    return new ol.renderer.webgl.TileLayer(this, layer);
+  } else {
+    goog.asserts.assert(false);
+    return null;
+  }
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.webgl.Map.prototype.disposeInternal = function() {
+  var gl = this.getGL();
+  if (!gl.isContextLost()) {
+    goog.object.forEach(this.programCache_, function(program) {
+      gl.deleteProgram(program);
+    });
+    goog.object.forEach(this.shaderCache_, function(shader) {
+      gl.deleteShader(shader);
+    });
+    goog.object.forEach(this.textureCache_, function(textureCacheEntry) {
+      gl.deleteTexture(textureCacheEntry.texture);
+    });
+  }
+  goog.base(this, 'disposeInternal');
+};
+
+
+/**
+ * @return {WebGLRenderingContext} GL.
+ */
+ol.renderer.webgl.Map.prototype.getGL = function() {
+  return this.gl_;
+};
+
+
+/**
+ * @param {ol.renderer.webgl.FragmentShader} fragmentShaderObject
+ *     Fragment shader.
+ * @param {ol.renderer.webgl.VertexShader} vertexShaderObject Vertex shader.
+ * @return {WebGLProgram} Program.
+ */
+ol.renderer.webgl.Map.prototype.getProgram = function(
+    fragmentShaderObject, vertexShaderObject) {
+  var programKey =
+      goog.getUid(fragmentShaderObject) + '/' + goog.getUid(vertexShaderObject);
+  if (programKey in this.programCache_) {
+    return this.programCache_[programKey];
+  } else {
+    var gl = this.getGL();
+    var program = gl.createProgram();
+    gl.attachShader(program, this.getShader(fragmentShaderObject));
+    gl.attachShader(program, this.getShader(vertexShaderObject));
+    gl.linkProgram(program);
+    if (goog.DEBUG) {
+      if (!gl.getProgramParameter(program, goog.webgl.LINK_STATUS) &&
+          !gl.isContextLost()) {
+        this.logger.severe(gl.getProgramInfoLog(program));
+        goog.asserts.assert(
+            gl.getProgramParameter(program, goog.webgl.LINK_STATUS));
+      }
+    }
+    this.programCache_[programKey] = program;
+    return program;
+  }
+};
+
+
+/**
+ * @param {ol.renderer.webgl.Shader} shaderObject Shader object.
+ * @return {WebGLShader} Shader.
+ */
+ol.renderer.webgl.Map.prototype.getShader = function(shaderObject) {
+  var shaderKey = goog.getUid(shaderObject);
+  if (shaderKey in this.shaderCache_) {
+    return this.shaderCache_[shaderKey];
+  } else {
+    var gl = this.getGL();
+    var shader = gl.createShader(shaderObject.getType());
+    gl.shaderSource(shader, shaderObject.getSource());
+    gl.compileShader(shader);
+    if (goog.DEBUG) {
+      if (!gl.getShaderParameter(shader, goog.webgl.COMPILE_STATUS) &&
+          !gl.isContextLost()) {
+        this.logger.severe(gl.getShaderInfoLog(shader));
+        goog.asserts.assert(
+            gl.getShaderParameter(shader, goog.webgl.COMPILE_STATUS));
+      }
+    }
+    this.shaderCache_[shaderKey] = shader;
+    return shader;
+  }
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.webgl.Map.prototype.handleBackgroundColorChanged = function() {
+  var backgroundColor = this.getMap().getBackgroundColor();
+  this.clearColor_ = new ol.Color(
+      backgroundColor.r / 255,
+      backgroundColor.g / 255,
+      backgroundColor.b / 255,
+      backgroundColor.a / 255);
+  this.getMap().render();
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.webgl.Map.prototype.handleCenterChanged = function() {
+  goog.base(this, 'handleCenterChanged');
+  this.getMap().render();
+};
+
+
+/**
+ * @param {goog.events.Event} event Event.
+ * @protected
+ */
+ol.renderer.webgl.Map.prototype.handleLayerRendererChange = function(event) {
+  this.getMap().render();
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.webgl.Map.prototype.handleResolutionChanged = function() {
+  goog.base(this, 'handleResolutionChanged');
+  this.getMap().render();
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.webgl.Map.prototype.handleRotationChanged = function() {
+  goog.base(this, 'handleRotationChanged');
+  this.getMap().render();
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.webgl.Map.prototype.handleSizeChanged = function() {
+  goog.base(this, 'handleSizeChanged');
+  var size = this.getMap().getSize();
+  if (!goog.isDef(size)) {
+    return;
+  }
+  this.canvas_.width = size.width;
+  this.canvas_.height = size.height;
+  var gl = this.gl_;
+  if (!goog.isNull(gl)) {
+    gl.viewport(0, 0, size.width, size.height);
+    this.getMap().render();
+  }
+};
+
+
+/**
+ * @param {goog.events.Event} event Event.
+ * @protected
+ */
+ol.renderer.webgl.Map.prototype.handleWebGLContextLost = function(event) {
+  if (goog.DEBUG) {
+    this.logger.info('WebGLContextLost');
+  }
+  event.preventDefault();
+  this.locations_ = null;
+  this.arrayBuffer_ = null;
+  this.shaderCache_ = {};
+  this.programCache_ = {};
+  this.textureCache_ = {};
+  goog.object.forEach(this.layerRenderers, function(layerRenderer) {
+    layerRenderer.handleWebGLContextLost();
+  });
+};
+
+
+/**
+ * @protected
+ */
+ol.renderer.webgl.Map.prototype.handleWebGLContextRestored = function() {
+  if (goog.DEBUG) {
+    this.logger.info('WebGLContextRestored');
+  }
+  this.initializeGL_();
+  this.getMap().render();
+};
+
+
+/**
+ * @private
+ */
+ol.renderer.webgl.Map.prototype.initializeGL_ = function() {
+  var gl = this.gl_;
+  gl.activeTexture(goog.webgl.TEXTURE0);
+  gl.blendFunc(goog.webgl.SRC_ALPHA, goog.webgl.ONE_MINUS_SRC_ALPHA);
+  gl.disable(goog.webgl.CULL_FACE);
+  gl.disable(goog.webgl.DEPTH_TEST);
+  gl.disable(goog.webgl.SCISSOR_TEST);
+};
+
+
+/**
+ * @param {Image} image Image.
+ * @return {boolean} Is image texture loaded.
+ */
+ol.renderer.webgl.Map.prototype.isImageTextureLoaded = function(image) {
+  return image.src in this.textureCache_;
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.webgl.Map.prototype.removeLayer = function(layer) {
+  goog.base(this, 'removeLayer', layer);
+  if (layer.getVisible()) {
+    this.getMap().render();
+  }
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.webgl.Map.prototype.removeLayerRenderer = function(layer) {
+  var layerRenderer = goog.base(this, 'removeLayerRenderer', layer);
+  if (!goog.isNull(layerRenderer)) {
+    var layerKey = goog.getUid(layer);
+    goog.events.unlistenByKey(this.layerRendererChangeListenKeys_[layerKey]);
+    delete this.layerRendererChangeListenKeys_[layerKey];
+  }
+  return layerRenderer;
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.webgl.Map.prototype.render = function() {
+
+  if (!this.getMap().isDef()) {
+    return false;
+  }
+
+  var size = this.getMap().getSize();
+
+  var animate = goog.base(this, 'render');
+
+  var gl = this.getGL();
+
+  gl.bindFramebuffer(goog.webgl.FRAMEBUFFER, null);
+
+  gl.clearColor(this.clearColor_.r, this.clearColor_.g, this.clearColor_.b,
+      this.clearColor_.a);
+  gl.clear(goog.webgl.COLOR_BUFFER_BIT);
+  gl.enable(goog.webgl.BLEND);
+  gl.viewport(0, 0, size.width, size.height);
+
+  var program = this.getProgram(this.fragmentShader_, this.vertexShader_);
+  gl.useProgram(program);
+  if (goog.isNull(this.locations_)) {
+    this.locations_ = {
+      aPosition: gl.getAttribLocation(program, 'aPosition'),
+      aTexCoord: gl.getAttribLocation(program, 'aTexCoord'),
+      uBrightness: gl.getUniformLocation(program, 'uBrightness'),
+      uContrast: gl.getUniformLocation(program, 'uContrast'),
+      uHue: gl.getUniformLocation(program, 'uHue'),
+      uMatrix: gl.getUniformLocation(program, 'uMatrix'),
+      uOpacity: gl.getUniformLocation(program, 'uOpacity'),
+      uSaturation: gl.getUniformLocation(program, 'uSaturation'),
+      uTexture: gl.getUniformLocation(program, 'uTexture')
+    };
+  }
+
+  if (goog.isNull(this.arrayBuffer_)) {
+    var arrayBuffer = gl.createBuffer();
+    gl.bindBuffer(goog.webgl.ARRAY_BUFFER, arrayBuffer);
+    gl.bufferData(goog.webgl.ARRAY_BUFFER, new Float32Array([
+      -1, -1, 0, 0,
+      1, -1, 1, 0,
+      -1, 1, 0, 1,
+      1, 1, 1, 1
+    ]), goog.webgl.STATIC_DRAW);
+    this.arrayBuffer_ = arrayBuffer;
+  } else {
+    gl.bindBuffer(goog.webgl.ARRAY_BUFFER, this.arrayBuffer_);
+  }
+
+  gl.enableVertexAttribArray(this.locations_.aPosition);
+  gl.vertexAttribPointer(
+      this.locations_.aPosition, 2, goog.webgl.FLOAT, false, 16, 0);
+  gl.enableVertexAttribArray(this.locations_.aTexCoord);
+  gl.vertexAttribPointer(
+      this.locations_.aTexCoord, 2, goog.webgl.FLOAT, false, 16, 8);
+  gl.uniform1i(this.locations_.uTexture, 0);
+
+  this.forEachReadyVisibleLayer(function(layer, layerRenderer) {
+    gl.uniformMatrix4fv(
+        this.locations_.uMatrix, false, layerRenderer.getMatrix());
+    gl.uniform1f(this.locations_.uBrightness, layer.getBrightness());
+    gl.uniform1f(this.locations_.uContrast, layer.getContrast());
+    gl.uniform1f(this.locations_.uHue, layer.getHue());
+    gl.uniform1f(this.locations_.uOpacity, layer.getOpacity());
+    gl.uniform1f(this.locations_.uSaturation, layer.getSaturation());
+    gl.bindTexture(goog.webgl.TEXTURE_2D, layerRenderer.getTexture());
+    gl.drawArrays(goog.webgl.TRIANGLE_STRIP, 0, 4);
+  }, this);
+
+  return animate;
+
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.webgl.Map.prototype.setLayerRenderer = function(
+    layer, layerRenderer) {
+  goog.base(this, 'setLayerRenderer', layer, layerRenderer);
+  var layerKey = goog.getUid(layer);
+  this.layerRendererChangeListenKeys_[layerKey] = goog.events.listen(
+      layerRenderer, goog.events.EventType.CHANGE,
+      this.handleLayerRendererChange, false, this);
+};

src/ol/renderer/webgl/shader.js

@@ -0,0 +1,81 @@
+goog.provide('ol.renderer.webgl.FragmentShader');
+goog.provide('ol.renderer.webgl.VertexShader');
+
+goog.require('goog.functions');
+goog.require('goog.webgl');
+
+
+
+/**
+ * @constructor
+ * @param {string} source Source.
+ */
+ol.renderer.webgl.Shader = function(source) {
+
+  /**
+   * @private
+   * @type {string}
+   */
+  this.source_ = source;
+
+};
+
+
+/**
+ * @return {number} Type.
+ */
+ol.renderer.webgl.Shader.prototype.getType = goog.abstractMethod;
+
+
+/**
+ * @return {string} Source.
+ */
+ol.renderer.webgl.Shader.prototype.getSource = function() {
+  return this.source_;
+};
+
+
+/**
+ * @return {boolean} Is animated?
+ */
+ol.renderer.webgl.Shader.prototype.isAnimated = goog.functions.FALSE;
+
+
+
+/**
+ * @constructor
+ * @extends {ol.renderer.webgl.Shader}
+ * @param {string} source Source.
+ */
+ol.renderer.webgl.FragmentShader = function(source) {
+  goog.base(this, source);
+};
+goog.inherits(ol.renderer.webgl.FragmentShader, ol.renderer.webgl.Shader);
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.webgl.FragmentShader.prototype.getType = function() {
+  return goog.webgl.FRAGMENT_SHADER;
+};
+
+
+
+/**
+ * @constructor
+ * @extends {ol.renderer.webgl.Shader}
+ * @param {string} source Source.
+ */
+ol.renderer.webgl.VertexShader = function(source) {
+  goog.base(this, source);
+};
+goog.inherits(ol.renderer.webgl.VertexShader, ol.renderer.webgl.Shader);
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.webgl.VertexShader.prototype.getType = function() {
+  return goog.webgl.VERTEX_SHADER;
+};

src/ol/renderer/webgl/tilelayer.js

@@ -0,0 +1,496 @@
+// FIXME large resolutions lead to too large framebuffers :-(
+// FIXME animated shaders! check in redraw
+
+goog.provide('ol.renderer.webgl.TileLayer');
+goog.provide('ol.renderer.webgl.tilelayerrenderer');
+goog.provide('ol.renderer.webgl.tilelayerrenderer.shader.Fragment');
+goog.provide('ol.renderer.webgl.tilelayerrenderer.shader.Vertex');
+
+goog.require('goog.array');
+goog.require('goog.asserts');
+goog.require('goog.debug.Logger');
+goog.require('goog.events.EventType');
+goog.require('goog.object');
+goog.require('goog.vec.Mat4');
+goog.require('goog.vec.Vec4');
+goog.require('goog.webgl');
+goog.require('ol.Coordinate');
+goog.require('ol.MapEventType');
+goog.require('ol.Size');
+goog.require('ol.TileLayer');
+goog.require('ol.TileState');
+goog.require('ol.renderer.webgl.FragmentShader');
+goog.require('ol.renderer.webgl.Layer');
+goog.require('ol.renderer.webgl.VertexShader');
+
+
+
+/**
+ * @constructor
+ * @extends {ol.renderer.webgl.FragmentShader}
+ */
+ol.renderer.webgl.tilelayerrenderer.shader.Fragment = function() {
+  goog.base(this, [
+    'precision mediump float;',
+    '',
+    'uniform sampler2D uTexture;',
+    '',
+    'varying vec2 vTexCoord;',
+    '',
+    'void main(void) {',
+    ' gl_FragColor = texture2D(uTexture, vTexCoord);',
+    '}'
+  ].join('\n'));
+};
+goog.inherits(
+    ol.renderer.webgl.tilelayerrenderer.shader.Fragment,
+    ol.renderer.webgl.FragmentShader);
+goog.addSingletonGetter(ol.renderer.webgl.tilelayerrenderer.shader.Fragment);
+
+
+
+/**
+ * @constructor
+ * @extends {ol.renderer.webgl.VertexShader}
+ */
+ol.renderer.webgl.tilelayerrenderer.shader.Vertex = function() {
+  goog.base(this, [
+    'attribute vec2 aPosition;',
+    'attribute vec2 aTexCoord;',
+    '',
+    'varying vec2 vTexCoord;',
+    '',
+    'uniform vec4 uTileOffset;',
+    '',
+    'void main(void) {',
+    '  gl_Position.xy = aPosition * uTileOffset.xy + uTileOffset.zw;',
+    '  gl_Position.z = 0.;',
+    '  gl_Position.w = 1.;',
+    '  vTexCoord = aTexCoord;',
+    '}'
+  ].join('\n'));
+};
+goog.inherits(
+    ol.renderer.webgl.tilelayerrenderer.shader.Vertex,
+    ol.renderer.webgl.VertexShader);
+goog.addSingletonGetter(ol.renderer.webgl.tilelayerrenderer.shader.Vertex);
+
+
+
+/**
+ * @constructor
+ * @extends {ol.renderer.webgl.Layer}
+ * @param {ol.renderer.Map} mapRenderer Map renderer.
+ * @param {ol.TileLayer} tileLayer Tile layer.
+ */
+ol.renderer.webgl.TileLayer = function(mapRenderer, tileLayer) {
+
+  goog.base(this, mapRenderer, tileLayer);
+
+  if (goog.DEBUG) {
+    /**
+     * @inheritDoc
+     */
+    this.logger = goog.debug.Logger.getLogger(
+        'ol.renderer.webgl.tilelayerrenderer.' + goog.getUid(this));
+  }
+
+  /**
+   * @private
+   * @type {ol.renderer.webgl.FragmentShader}
+   */
+  this.fragmentShader_ =
+      ol.renderer.webgl.tilelayerrenderer.shader.Fragment.getInstance();
+
+  /**
+   * @private
+   * @type {ol.renderer.webgl.VertexShader}
+   */
+  this.vertexShader_ =
+      ol.renderer.webgl.tilelayerrenderer.shader.Vertex.getInstance();
+
+  /**
+   * @private
+   * @type {{aPosition: number,
+   *         aTexCoord: number,
+   *         uTileOffset: WebGLUniformLocation,
+   *         uTexture: WebGLUniformLocation}|null}
+   */
+  this.locations_ = null;
+
+  /**
+   * @private
+   * @type {WebGLBuffer}
+   */
+  this.arrayBuffer_ = null;
+
+  /**
+   * @private
+   * @type {WebGLTexture}
+   */
+  this.texture_ = null;
+
+  /**
+   * @private
+   * @type {WebGLFramebuffer}
+   */
+  this.framebuffer_ = null;
+
+  /**
+   * @private
+   * @type {number|undefined}
+   */
+  this.framebufferDimension_ = undefined;
+
+  /**
+   * @private
+   * @type {Object.<number, number>}
+   */
+  this.tileChangeListenerKeys_ = {};
+
+  /**
+   * @private
+   * @type {goog.vec.Mat4.AnyType}
+   */
+  this.matrix_ = goog.vec.Mat4.createNumber();
+
+};
+goog.inherits(ol.renderer.webgl.TileLayer, ol.renderer.webgl.Layer);
+
+
+/**
+ * @param {number} framebufferDimension Framebuffer dimension.
+ * @private
+ */
+ol.renderer.webgl.TileLayer.prototype.bindFramebuffer_ =
+    function(framebufferDimension) {
+
+  var mapRenderer = this.getMapRenderer();
+  var gl = mapRenderer.getGL();
+
+  if (!goog.isDef(this.framebufferDimension_) ||
+      this.framebufferDimension_ != framebufferDimension) {
+
+    if (goog.DEBUG) {
+      this.logger.info('re-sizing framebuffer');
+    }
+
+    if (ol.renderer.webgl.FREE_RESOURCES_IMMEDIATELY) {
+      if (goog.DEBUG) {
+        this.logger.info('freeing WebGL resources');
+      }
+      if (!gl.isContextLost()) {
+        gl.deleteFramebuffer(this.framebuffer_);
+        gl.deleteTexture(this.texture_);
+      }
+    } else {
+      var map = this.getMap();
+      goog.events.listenOnce(
+          map,
+          ol.MapEventType.POST_RENDER,
+          goog.partial(function(gl, framebuffer, texture) {
+            if (goog.DEBUG) {
+              this.logger.info('freeing WebGL resources on postrender');
+            }
+            if (!gl.isContextLost()) {
+              gl.deleteFramebuffer(framebuffer);
+              gl.deleteTexture(texture);
+            }
+          }, gl, this.framebuffer_, this.texture_));
+    }
+
+    var texture = gl.createTexture();
+    gl.bindTexture(goog.webgl.TEXTURE_2D, texture);
+    gl.texImage2D(goog.webgl.TEXTURE_2D, 0, goog.webgl.RGBA,
+        framebufferDimension, framebufferDimension, 0, goog.webgl.RGBA,
+        goog.webgl.UNSIGNED_BYTE, null);
+    gl.texParameteri(goog.webgl.TEXTURE_2D, goog.webgl.TEXTURE_MAG_FILTER,
+        goog.webgl.LINEAR);
+    gl.texParameteri(goog.webgl.TEXTURE_2D, goog.webgl.TEXTURE_MIN_FILTER,
+        goog.webgl.LINEAR);
+
+    var framebuffer = gl.createFramebuffer();
+    gl.bindFramebuffer(goog.webgl.FRAMEBUFFER, framebuffer);
+    gl.framebufferTexture2D(goog.webgl.FRAMEBUFFER,
+        goog.webgl.COLOR_ATTACHMENT0, goog.webgl.TEXTURE_2D, texture, 0);
+
+    this.texture_ = texture;
+    this.framebuffer_ = framebuffer;
+    this.framebufferDimension_ = framebufferDimension;
+
+  } else {
+    gl.bindFramebuffer(goog.webgl.FRAMEBUFFER, this.framebuffer_);
+  }
+
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.webgl.TileLayer.prototype.disposeInternal = function() {
+  var mapRenderer = this.getMapRenderer();
+  var gl = mapRenderer.getGL();
+  if (!gl.isContextLost()) {
+    gl.deleteBuffer(this.arrayBuffer_);
+    gl.deleteFramebuffer(this.framebuffer_);
+    gl.deleteTexture(this.texture_);
+  }
+  goog.base(this, 'disposeInternal');
+};
+
+
+/**
+ * @return {ol.TileLayer} Layer.
+ * @inheritDoc
+ */
+ol.renderer.webgl.TileLayer.prototype.getLayer = function() {
+  return /** @type {ol.TileLayer} */ goog.base(this, 'getLayer');
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.webgl.TileLayer.prototype.getMatrix = function() {
+  return this.matrix_;
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.webgl.TileLayer.prototype.getTexture = function() {
+  return this.texture_;
+};
+
+
+/**
+ * @protected
+ */
+ol.renderer.webgl.TileLayer.prototype.handleTileChange = function() {
+  this.dispatchChangeEvent();
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.webgl.TileLayer.prototype.handleWebGLContextLost = function() {
+  this.locations_ = null;
+  this.arrayBuffer_ = null;
+  this.texture_ = null;
+  this.framebuffer_ = null;
+  this.framebufferDimension_ = undefined;
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.webgl.TileLayer.prototype.render = function() {
+
+  var animate = false;
+
+  var mapRenderer = this.getMapRenderer();
+  var map = this.getMap();
+  var gl = mapRenderer.getGL();
+
+  goog.asserts.assert(map.isDef());
+  var mapCenter = map.getCenter();
+  var mapExtent = map.getExtent();
+  var mapResolution = /** @type {number} */ map.getResolution();
+  var mapRotatedExtent = map.getRotatedExtent();
+  var mapRotation = map.getRotation();
+
+  var tileLayer = this.getLayer();
+  var tileStore = tileLayer.getStore();
+  var tileGrid = tileStore.getTileGrid();
+  var z = tileGrid.getZForResolution(mapResolution);
+  var tileResolution = tileGrid.getResolution(z);
+  var tileBounds = tileGrid.getTileBoundsForExtentAndResolution(
+      mapRotatedExtent, tileResolution);
+  var tileBoundsSize = tileBounds.getSize();
+  var tileSize = tileGrid.getTileSize();
+
+  var maxDimension = Math.max(
+      tileBoundsSize.width * tileSize.width,
+      tileBoundsSize.height * tileSize.height);
+  var framebufferDimension =
+      Math.pow(2, Math.ceil(Math.log(maxDimension) / Math.log(2)));
+  var framebufferExtentSize = new ol.Size(
+      tileResolution * framebufferDimension,
+      tileResolution * framebufferDimension);
+  var origin = tileGrid.getOrigin(z);
+  var minX = origin.x + tileBounds.minX * tileSize.width * tileResolution;
+  var minY = origin.y + tileBounds.minY * tileSize.height * tileResolution;
+  var framebufferExtent = new ol.Extent(
+      minX,
+      minY,
+      minX + framebufferExtentSize.width,
+      minY + framebufferExtentSize.height);
+
+  this.bindFramebuffer_(framebufferDimension);
+  gl.viewport(0, 0, framebufferDimension, framebufferDimension);
+
+  gl.clearColor(0, 0, 0, 0);
+  gl.clear(goog.webgl.COLOR_BUFFER_BIT);
+  gl.disable(goog.webgl.BLEND);
+
+  var program = mapRenderer.getProgram(
+      this.fragmentShader_, this.vertexShader_);
+  gl.useProgram(program);
+  if (goog.isNull(this.locations_)) {
+    this.locations_ = {
+      aPosition: gl.getAttribLocation(program, 'aPosition'),
+      aTexCoord: gl.getAttribLocation(program, 'aTexCoord'),
+      uTileOffset: gl.getUniformLocation(program, 'uTileOffset'),
+      uTexture: gl.getUniformLocation(program, 'uTexture')
+    };
+  }
+
+  if (goog.isNull(this.arrayBuffer_)) {
+    var arrayBuffer = gl.createBuffer();
+    gl.bindBuffer(goog.webgl.ARRAY_BUFFER, arrayBuffer);
+    gl.bufferData(goog.webgl.ARRAY_BUFFER, new Float32Array([
+      0, 0, 0, 1,
+      1, 0, 1, 1,
+      0, 1, 0, 0,
+      1, 1, 1, 0
+    ]), goog.webgl.STATIC_DRAW);
+    this.arrayBuffer_ = arrayBuffer;
+  } else {
+    gl.bindBuffer(goog.webgl.ARRAY_BUFFER, this.arrayBuffer_);
+  }
+
+  gl.enableVertexAttribArray(this.locations_.aPosition);
+  gl.vertexAttribPointer(
+      this.locations_.aPosition, 2, goog.webgl.FLOAT, false, 16, 0);
+  gl.enableVertexAttribArray(this.locations_.aTexCoord);
+  gl.vertexAttribPointer(
+      this.locations_.aTexCoord, 2, goog.webgl.FLOAT, false, 16, 8);
+  gl.uniform1i(this.locations_.uTexture, 0);
+
+  /**
+   * @type {Object.<number, Object.<string, ol.TileCoord>>}
+   */
+  var tilesToDrawByZ = {};
+
+  /**
+   * @type {Array.<ol.Tile>}
+   */
+  var imagesToLoad = [];
+
+  tilesToDrawByZ[z] = {};
+  tileBounds.forEachTileCoord(z, function(tileCoord) {
+
+    var tile = tileStore.getTile(tileCoord);
+
+    if (goog.isNull(tile)) {
+    } else if (tile.getState() == ol.TileState.LOADED) {
+      if (mapRenderer.isImageTextureLoaded(tile.getImage())) {
+        tilesToDrawByZ[z][tileCoord.toString()] = tile;
+        return;
+      } else {
+        imagesToLoad.push(tile.getImage());
+      }
+    } else {
+      var tileKey = goog.getUid(tile);
+      if (!(tileKey in this.tileChangeListenerKeys_)) {
+        tile.load();
+        // FIXME will need to handle aborts as well
+        this.tileChangeListenerKeys_[tileKey] = goog.events.listen(tile,
+            goog.events.EventType.CHANGE, this.handleTileChange, false, this);
+      }
+    }
+
+    // FIXME this could be more efficient about filling partial holes
+    tileGrid.forEachTileCoordParentTileBounds(
+        tileCoord,
+        function(z, tileBounds) {
+          var fullyCovered = true;
+          tileBounds.forEachTileCoord(z, function(tileCoord) {
+            var tileCoordKey = tileCoord.toString();
+            if (tilesToDrawByZ[z] && tilesToDrawByZ[z][tileCoordKey]) {
+              return;
+            }
+            var tile = tileStore.getTile(tileCoord);
+            if (!goog.isNull(tile) &&
+                tile.getState() == ol.TileState.LOADED) {
+              if (!tilesToDrawByZ[z]) {
+                tilesToDrawByZ[z] = {};
+              }
+              tilesToDrawByZ[z][tileCoordKey] = tile;
+            } else {
+              fullyCovered = false;
+            }
+          });
+          return fullyCovered;
+        });
+
+  }, this);
+
+  var zs = goog.object.getKeys(tilesToDrawByZ);
+  goog.array.sort(zs);
+  var uTileOffset = goog.vec.Vec4.createFloat32();
+  goog.array.forEach(zs, function(z) {
+    goog.object.forEach(tilesToDrawByZ[z], function(tile) {
+      var tileExtent = tileGrid.getTileCoordExtent(tile.tileCoord);
+      var sx = 2 * tileExtent.getWidth() / framebufferExtentSize.width;
+      var sy = 2 * tileExtent.getHeight() / framebufferExtentSize.height;
+      var tx = 2 * (tileExtent.minX - framebufferExtent.minX) /
+          framebufferExtentSize.width - 1;
+      var ty = 2 * (tileExtent.minY - framebufferExtent.minY) /
+          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);
+      gl.drawArrays(goog.webgl.TRIANGLE_STRIP, 0, 4);
+    }, this);
+  }, this);
+
+  goog.vec.Mat4.makeIdentity(this.matrix_);
+  goog.vec.Mat4.translate(this.matrix_,
+      (mapCenter.x - framebufferExtent.minX) /
+          (framebufferExtent.maxX - framebufferExtent.minX),
+      (mapCenter.y - framebufferExtent.minY) /
+          (framebufferExtent.maxY - framebufferExtent.minY),
+      0);
+  goog.vec.Mat4.scale(this.matrix_,
+      (mapExtent.maxX - mapExtent.minX) /
+          (framebufferExtent.maxX - framebufferExtent.minX),
+      (mapExtent.maxY - mapExtent.minY) /
+          (framebufferExtent.maxY - framebufferExtent.minY),
+      1);
+  if (goog.isDef(mapRotation)) {
+    goog.vec.Mat4.rotate(this.matrix_,
+        mapRotation,
+        0,
+        0,
+        1);
+  }
+  goog.vec.Mat4.translate(this.matrix_,
+      -0.5,
+      -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;
+
+};

src/ol/renderer/webgl/webgl.js

@@ -0,0 +1,15 @@
+goog.provide('ol.renderer.webgl');
+
+
+/**
+ * @define {boolean} Free resources immediately.
+ */
+ol.renderer.webgl.FREE_RESOURCES_IMMEDIATELY = false;
+
+
+/**
+ * @return {boolean} Is supported.
+ */
+ol.renderer.webgl.isSupported = function() {
+  return 'WebGLRenderingContext' in goog.global;
+};