From d1e5906e2cf815e80681a99b92abd57ba3dc53a9 Mon Sep 17 00:00:00 2001
From: Tom Payne <twpayne@gmail.com>
Date: Sat, 14 Jul 2012 13:36:24 +0200
Subject: [PATCH] Merge Map and MapRenderer

---
 skeleton.html                                 |   2 +-
 src/all.js                                    |   8 +-
 src/ol/createmap.js                           |  66 ++++
 src/ol/dom/dom.js                             |   9 +
 .../dommaprenderer.js => dom/map.js}          |  22 +-
 src/ol/map.js                                 | 262 ++++++++++++----
 src/ol/maprenderer.js                         | 293 ------------------
 .../{webglrenderer => webgl}/arraybuffer.js   |  14 +-
 .../{webglrenderer => webgl}/framebuffer.js   |  20 +-
 src/ol/{webglrenderer => webgl}/globject.js   |  16 +-
 src/ol/webgl/iglobject.js                     |  20 ++
 .../webglmaprenderer.js => webgl/map.js}      |  46 ++-
 src/ol/{webglrenderer => webgl}/program.js    |  28 +-
 .../{webglrenderer => webgl}/programcache.js  |  30 +-
 src/ol/{webglrenderer => webgl}/shader.js     |  30 +-
 src/ol/webgl/shader/fragment.js               |  27 ++
 src/ol/webgl/shader/vertex.js                 |  27 ++
 .../staticglobject.js                         |  12 +-
 src/ol/{webglrenderer => webgl}/texture.js    |  14 +-
 .../tilelayerrenderer.js                      |  20 +-
 src/ol/{webglrenderer => webgl}/uniform.js    |  22 +-
 .../{webglrenderer => webgl}/vertexattrib.js  |  18 +-
 src/ol/webgl/webgl.js                         |   9 +
 src/ol/webglrenderer/iglobject.js             |  20 --
 src/ol/webglrenderer/shader/fragment.js       |  27 --
 src/ol/webglrenderer/shader/vertex.js         |  27 --
 26 files changed, 504 insertions(+), 585 deletions(-)
 create mode 100644 src/ol/createmap.js
 create mode 100644 src/ol/dom/dom.js
 rename src/ol/{domrenderer/dommaprenderer.js => dom/map.js} (51%)
 delete mode 100644 src/ol/maprenderer.js
 rename src/ol/{webglrenderer => webgl}/arraybuffer.js (61%)
 rename src/ol/{webglrenderer => webgl}/framebuffer.js (81%)
 rename src/ol/{webglrenderer => webgl}/globject.js (50%)
 create mode 100644 src/ol/webgl/iglobject.js
 rename src/ol/{webglrenderer/webglmaprenderer.js => webgl/map.js} (67%)
 rename src/ol/{webglrenderer => webgl}/program.js (61%)
 rename src/ol/{webglrenderer => webgl}/programcache.js (50%)
 rename src/ol/{webglrenderer => webgl}/shader.js (65%)
 create mode 100644 src/ol/webgl/shader/fragment.js
 create mode 100644 src/ol/webgl/shader/vertex.js
 rename src/ol/{webglrenderer => webgl}/staticglobject.js (59%)
 rename src/ol/{webglrenderer => webgl}/texture.js (75%)
 rename src/ol/{webglrenderer => webgl}/tilelayerrenderer.js (51%)
 rename src/ol/{webglrenderer => webgl}/uniform.js (67%)
 rename src/ol/{webglrenderer => webgl}/vertexattrib.js (69%)
 create mode 100644 src/ol/webgl/webgl.js
 delete mode 100644 src/ol/webglrenderer/iglobject.js
 delete mode 100644 src/ol/webglrenderer/shader/fragment.js
 delete mode 100644 src/ol/webglrenderer/shader/vertex.js

diff --git a/skeleton.html b/skeleton.html
index 23b57e01c7..dfe546215c 100644
--- a/skeleton.html
+++ b/skeleton.html
@@ -16,7 +16,7 @@
 		<script>
 
 			var target = document.getElementById('map');
-			var map = new ol.Map(target);
+			var map = ol.createMap(target);
 
 			var layer = ol.TileLayer.createOpenStreetMap({
 				'opacity': 0.5,
diff --git a/src/all.js b/src/all.js
index 01b6584d7d..4815c45e01 100644
--- a/src/all.js
+++ b/src/all.js
@@ -3,12 +3,10 @@ goog.provide('ol');
 goog.require('ol.Array');
 goog.require('ol.Bounds');
 goog.require('ol.Camera');
-goog.require('ol.DOMMapRenderer');
 goog.require('ol.Extent');
 goog.require('ol.Layer');
 goog.require('ol.LayerRenderer');
 goog.require('ol.Map');
-goog.require('ol.MapRenderer');
 goog.require('ol.Object');
 goog.require('ol.Projection');
 goog.require('ol.Store');
@@ -21,4 +19,8 @@ goog.require('ol.TileStore');
 goog.require('ol.TileUrlFunction');
 goog.require('ol.TileUrlFunctionType');
 goog.require('ol.TransformFunction');
-goog.require('ol.WebGLMapRenderer');
+goog.require('ol.createMap');
+goog.require('ol.dom');
+goog.require('ol.dom.Map');
+goog.require('ol.webgl');
+goog.require('ol.webgl.Map');
diff --git a/src/ol/createmap.js b/src/ol/createmap.js
new file mode 100644
index 0000000000..ab965e98d2
--- /dev/null
+++ b/src/ol/createmap.js
@@ -0,0 +1,66 @@
+goog.provide('ol.createMap');
+
+goog.require('goog.object');
+goog.require('ol.Array');
+goog.require('ol.Camera');
+goog.require('ol.Projection');
+goog.require('ol.dom');
+goog.require('ol.dom.Map');
+goog.require('ol.webgl');
+goog.require('ol.webgl.Map');
+
+
+/**
+ * @define {string} Default projection code.
+ */
+ol.DEFAULT_PROJECTION_CODE = 'EPSG:3857';
+
+
+/**
+ * @define {boolean} Whether to enable DOM.
+ */
+ol.ENABLE_DOM = true;
+
+
+/**
+ * @define {boolean} Whether to enable WebGL.
+ */
+ol.ENABLE_WEBGL = true;
+
+
+/**
+ * @param {!HTMLDivElement} target Target.
+ * @param {Object.<string, *>=} opt_values Values.
+ * @return {ol.Map} Map.
+ */
+ol.createMap = function(target, opt_values) {
+
+  var values = {};
+  if (goog.isDef(opt_values)) {
+    goog.object.extend(values, opt_values);
+  }
+
+  if (!goog.object.containsKey(values, ol.MapProperty.CAMERA)) {
+    values[ol.MapProperty.CAMERA] = new ol.Camera();
+  }
+
+  if (!goog.object.containsKey(values, ol.MapProperty.LAYERS)) {
+    values[ol.MapProperty.LAYERS] = new ol.Array();
+  }
+
+  if (!goog.object.containsKey(values, ol.MapProperty.PROJECTION)) {
+    values[ol.MapProperty.PROJECTION] =
+        ol.Projection.createFromCode(ol.DEFAULT_PROJECTION_CODE);
+  }
+
+  if (ol.ENABLE_WEBGL && ol.webgl.isSupported()) {
+    return new ol.webgl.Map(target, values);
+  }
+
+  if (ol.ENABLE_DOM && ol.dom.isSupported()) {
+    return new ol.dom.Map(target, values);
+  }
+
+  return null;
+
+};
diff --git a/src/ol/dom/dom.js b/src/ol/dom/dom.js
new file mode 100644
index 0000000000..172cecad61
--- /dev/null
+++ b/src/ol/dom/dom.js
@@ -0,0 +1,9 @@
+goog.provide('ol.dom');
+
+goog.require('goog.functions');
+
+
+/**
+ * @return {boolean} Is supported.
+ */
+ol.dom.isSupported = goog.functions.TRUE;
diff --git a/src/ol/domrenderer/dommaprenderer.js b/src/ol/dom/map.js
similarity index 51%
rename from src/ol/domrenderer/dommaprenderer.js
rename to src/ol/dom/map.js
index 69b1b97fab..1a8c66f2f0 100644
--- a/src/ol/domrenderer/dommaprenderer.js
+++ b/src/ol/dom/map.js
@@ -1,18 +1,18 @@
-goog.provide('ol.DOMMapRenderer');
+goog.provide('ol.dom.Map');
 
 goog.require('ol.Layer');
-goog.require('ol.MapRenderer');
+goog.require('ol.Map');
 goog.require('ol.TileStore');
 
 
 
 /**
  * @constructor
- * @extends {ol.MapRenderer}
+ * @extends {ol.Map}
  * @param {!HTMLDivElement} target Target.
  * @param {Object.<string, *>=} opt_values Values.
  */
-ol.DOMMapRenderer = function(target, opt_values) {
+ol.dom.Map = function(target, opt_values) {
 
   goog.base(this, target);
 
@@ -23,24 +23,16 @@ ol.DOMMapRenderer = function(target, opt_values) {
   }
 
 };
-goog.inherits(ol.DOMMapRenderer, ol.MapRenderer);
-
-
-/**
- * @return {boolean} Is supported.
- */
-ol.DOMMapRenderer.isSupported = function() {
-  return true;
-};
+goog.inherits(ol.dom.Map, ol.Map);
 
 
 /**
  * @inheritDoc
  */
-ol.DOMMapRenderer.prototype.createLayerRenderer = function(layer) {
+ol.dom.Map.prototype.createLayerRenderer = function(layer) {
   var store = layer.getStore();
   if (layer instanceof ol.TileStore) {
-    // FIXME create DOMTileLayerRenderer
+    // FIXME create ol.dom.TileLayerRenderer
   }
   return null;
 };
diff --git a/src/ol/map.js b/src/ol/map.js
index baa92840af..5182f17d4f 100644
--- a/src/ol/map.js
+++ b/src/ol/map.js
@@ -1,26 +1,17 @@
 goog.provide('ol.Map');
+goog.provide('ol.MapProperty');
 
+goog.require('goog.array');
+goog.require('goog.events');
+goog.require('goog.events.Event');
+goog.require('goog.events.EventType');
 goog.require('goog.object');
 goog.require('ol.Array');
 goog.require('ol.Camera');
-goog.require('ol.DOMMapRenderer');
-goog.require('ol.MapRenderer');
-goog.require('ol.MapRendererProperty');
+goog.require('ol.CameraProperty');
+goog.require('ol.LayerRenderer');
 goog.require('ol.Object');
 goog.require('ol.Projection');
-goog.require('ol.WebGLMapRenderer');
-
-
-/**
- * @define {boolean} Whether to enable the DOM renderer.
- */
-ol.ENABLE_DOM_RENDERER = true;
-
-
-/**
- * @define {boolean} Whether to enable the WebGL renderer.
- */
-ol.ENABLE_WEBGL_RENDERER = true;
 
 
 /**
@@ -37,8 +28,8 @@ ol.MapProperty = {
 /**
  * @constructor
  * @extends {ol.Object}
- * @param {!HTMLDivElement} target Target.
- * @param {Object.<string, *>=} opt_values Values.
+ * @param {HTMLDivElement} target Target.
+ * @param {Object=} opt_values Values.
  */
 ol.Map = function(target, opt_values) {
 
@@ -52,48 +43,73 @@ ol.Map = function(target, opt_values) {
 
   /**
    * @private
-   * @type {ol.MapRenderer}
+   * @type {goog.math.Size}
    */
-  this.mapRenderer_ = null;
+  this.size_ = new goog.math.Size(target.clientWidth, target.clientHeight);
 
-  if (ol.ENABLE_WEBGL_RENDERER && goog.isNull(this.mapRenderer_)) {
-    if (ol.WebGLMapRenderer.isSupported()) {
-      this.mapRenderer_ = new ol.WebGLMapRenderer(this.target_);
-    }
+  /**
+   * @private
+   * @type {Array.<number>}
+   */
+  this.cameraListenerKeys_ = null;
+
+  /**
+   * @private
+   * @type {Array.<number>}
+   */
+  this.layersListenerKeys_ = null;
+
+  /**
+   * @private
+   * @type {Object.<number, ol.LayerRenderer>}
+   */
+  this.layerRenderers_ = {};
+
+  goog.events.listen(target, goog.events.EventType.RESIZE,
+      this.handleTargetResize, false, this);
+
+  goog.events.listen(
+      this, ol.Object.getChangedEventType(ol.MapProperty.CAMERA),
+      this.handleCameraChanged, false, this);
+
+  goog.events.listen(
+      this, ol.Object.getChangedEventType(ol.MapProperty.LAYERS),
+      this.handleLayersChanged, false, this);
+
+  if (goog.isDef(opt_values)) {
+    this.setValues(opt_values);
   }
 
-  if (ol.ENABLE_DOM_RENDERER && goog.isNull(this.mapRenderer_)) {
-    if (ol.DOMMapRenderer.isSupported()) {
-      this.mapRenderer_ = new ol.DOMMapRenderer(this.target_);
-    }
-  }
-
-  goog.asserts.assert(!goog.isNull(this.mapRenderer_));
-
-  this.mapRenderer_.bindTo(
-      ol.MapRendererProperty.CAMERA, this, ol.MapProperty.CAMERA);
-  this.mapRenderer_.bindTo(
-      ol.MapRendererProperty.LAYERS, this, ol.MapProperty.LAYERS);
-
-  var values = goog.isDef(opt_values) ? goog.object.clone(opt_values) : {};
-
-  if (!(ol.MapProperty.CAMERA in values)) {
-    values[ol.MapProperty.CAMERA] = new ol.Camera();
-  }
-  if (!(ol.MapProperty.LAYERS in values)) {
-    values[ol.MapProperty.LAYERS] = new ol.Array();
-  }
-  if (!(ol.MapProperty.PROJECTION in values)) {
-    values[ol.MapProperty.PROJECTION] =
-        ol.Projection.createFromCode('EPSG:3857');
-  }
-
-  this.setValues(values);
-
 };
 goog.inherits(ol.Map, ol.Object);
 
 
+/**
+ * @param {ol.Layer} layer Layer.
+ * @protected
+ * @return {ol.LayerRenderer} layerRenderer Layer renderer.
+ */
+ol.Map.prototype.createLayerRenderer = goog.abstractMethod;
+
+
+/**
+ * @protected
+ * @param {function(this: T, ol.LayerRenderer)} f Function.
+ * @param {T=} opt_obj The object to be used for the value of 'this' within f.
+ * @template T
+ */
+ol.Map.prototype.forEachLayerRenderer = function(f, opt_obj) {
+  var layers = this.getLayers();
+  if (goog.isDefAndNotNull(layers)) {
+    layers.forEach(function(layer) {
+      var key = goog.getUid(layer);
+      var layerRenderer = this.layerRenderers_[key];
+      f.call(opt_obj, layerRenderer);
+    }, this);
+  }
+};
+
+
 /**
  * @return {ol.Camera} Camera.
  */
@@ -118,6 +134,15 @@ ol.Map.prototype.getProjection = function() {
 };
 
 
+/**
+ * @protected
+ * @return {goog.math.Size} Size.
+ */
+ol.Map.prototype.getSize = function() {
+  return this.size_;
+};
+
+
 /**
  * @return {HTMLDivElement} Target.
  */
@@ -126,6 +151,123 @@ ol.Map.prototype.getTarget = function() {
 };
 
 
+/**
+ * @protected
+ */
+ol.Map.prototype.handleCameraChanged = function() {
+  if (!goog.isNull(this.cameraListenerKeys_)) {
+    goog.array.forEach(this.cameraListenerKeys_, goog.events.unlistenByKey);
+    this.cameraListenerKeys_ = null;
+  }
+  var camera = this.getCamera();
+  if (goog.isDefAndNotNull(camera)) {
+    this.cameraListenerKeys_ = goog.array.map(
+        goog.object.getValues(ol.CameraProperty),
+        function(cameraProperty) {
+          return goog.events.listen(camera, cameraProperty,
+              this.handleCameraPropertyChanged, false, this);
+        },
+        this);
+  }
+};
+
+
+/**
+ * @protected
+ */
+ol.Map.prototype.handleCameraPropertyChanged = goog.nullFunction;
+
+
+/**
+ * @param {ol.Layer} layer Layer.
+ * @protected
+ */
+ol.Map.prototype.handleLayerAdd = function(layer) {
+  var key = goog.getUid(layer);
+  var layerRenderer = this.createLayerRenderer(layer);
+  this.layerRenderers_[key] = layerRenderer;
+};
+
+
+/**
+ * @param {ol.Layer} layer Layer.
+ * @protected
+ */
+ol.Map.prototype.handleLayerRemove = function(layer) {
+  var key = goog.getUid(layer);
+  goog.asserts.assert(key in this.layerRenderers_);
+  var layerRenderer = this.layerRenderers_[key];
+  delete this.layerRenderers_[key];
+  goog.dispose(layerRenderer);
+};
+
+
+/**
+ * @param {ol.ArrayEvent} event Event.
+ * @protected
+ */
+ol.Map.prototype.handleLayersInsertAt = function(event) {
+  var layers = /** @type {ol.Array} */ (event.target);
+  var layer = /** @type {ol.Layer} */ layers.getAt(event.index);
+  this.handleLayerAdd(layer);
+};
+
+
+/**
+ * @param {ol.ArrayEvent} event Event.
+ * @protected
+ */
+ol.Map.prototype.handleLayersRemoveAt = function(event) {
+  var layer = /** @type {ol.Layer} */ (event.prev);
+  this.handleLayerRemove(layer);
+};
+
+
+/**
+ * @param {ol.ArrayEvent} event Event.
+ * @protected
+ */
+ol.Map.prototype.handleLayersSetAt = function(event) {
+  var prevLayer = /** @type {ol.Layer} */ (event.prev);
+  this.handleLayerRemove(prevLayer);
+  var layers = /** @type {ol.Array} */ (event.target);
+  var layer = /** @type {ol.Layer} */ layers.getAt(event.index);
+  this.handleLayerAdd(layer);
+};
+
+
+/**
+ */
+ol.Map.prototype.handleLayersChanged = function() {
+  if (!goog.isNull(this.layersListenerKeys_)) {
+    goog.array.forEach(this.layersListenerKeys_, goog.events.unlistenByKey);
+    this.layersListenerKeys_ = null;
+  }
+  var layers = this.getLayers();
+  if (goog.isDefAndNotNull(layers)) {
+    this.layersListenerKeys_ = [
+      goog.events.listen(layers, ol.ArrayEventType.INSERT_AT,
+          this.handleLayersInsertAt, false, this),
+      goog.events.listen(layers, ol.ArrayEventType.REMOVE_AT,
+          this.handleLayersRemoveAt, false, this),
+      goog.events.listen(layers, ol.ArrayEventType.SET_AT,
+          this.handleLayersSetAt, false, this)
+    ];
+  }
+};
+
+
+/**
+ * @param {goog.events.Event} event Event.
+ * @protected
+ */
+ol.Map.prototype.handleTargetResize = function(event) {
+  goog.asserts.assert(event.target == this.target_);
+  this.size_.width = this.target_.clientWidth;
+  this.size_.height = this.target_.clientHeight;
+};
+
+
 /**
  * @param {ol.Camera} camera Camera.
  */
@@ -134,17 +276,17 @@ ol.Map.prototype.setCamera = function(camera) {
 };
 
 
-/**
- * @param {ol.Projection} projection Projection.
- */
-ol.Map.prototype.setProjection = function(projection) {
-  this.set(ol.MapProperty.PROJECTION, projection);
-};
-
-
 /**
  * @param {ol.Array} layers Layers.
  */
 ol.Map.prototype.setLayers = function(layers) {
   this.set(ol.MapProperty.LAYERS, layers);
 };
+
+
+/**
+ * @param {ol.Projection} projection Projection.
+ */
+ol.Map.prototype.setProjection = function(projection) {
+  this.set(ol.MapProperty.PROJECTION, projection);
+};
diff --git a/src/ol/maprenderer.js b/src/ol/maprenderer.js
deleted file mode 100644
index 761b9d9caf..0000000000
--- a/src/ol/maprenderer.js
+++ /dev/null
@@ -1,293 +0,0 @@
-goog.provide('ol.MapRenderer');
-goog.provide('ol.MapRendererProperty');
-
-goog.require('goog.array');
-goog.require('goog.events');
-goog.require('goog.events.Event');
-goog.require('goog.events.EventType');
-goog.require('goog.object');
-goog.require('ol.Array');
-goog.require('ol.Camera');
-goog.require('ol.CameraProperty');
-goog.require('ol.LayerRenderer');
-goog.require('ol.Object');
-goog.require('ol.Projection');
-
-
-/**
- * @enum {string}
- */
-ol.MapRendererProperty = {
-  CAMERA: 'camera',
-  LAYERS: 'layers',
-  PROJECTION: 'projection'
-};
-
-
-
-/**
- * @constructor
- * @extends {ol.Object}
- * @param {HTMLDivElement} target Target.
- * @param {Object=} opt_values Values.
- */
-ol.MapRenderer = function(target, opt_values) {
-
-  goog.base(this);
-
-  /**
-   * @private
-   * @type {HTMLDivElement}
-   */
-  this.target_ = target;
-
-  /**
-   * @private
-   * @type {goog.math.Size}
-   */
-  this.size_ = new goog.math.Size(target.clientWidth, target.clientHeight);
-
-  /**
-   * @private
-   * @type {Array.<number>}
-   */
-  this.cameraListenerKeys_ = null;
-
-  /**
-   * @private
-   * @type {Array.<number>}
-   */
-  this.layersListenerKeys_ = null;
-
-  /**
-   * @private
-   * @type {Object.<number, ol.LayerRenderer>}
-   */
-  this.layerRenderers_ = {};
-
-  goog.events.listen(target, goog.events.EventType.RESIZE,
-      this.handleTargetResize, false, this);
-
-  goog.events.listen(
-      this, ol.Object.getChangedEventType(ol.MapRendererProperty.CAMERA),
-      this.handleCameraChanged, false, this);
-
-  goog.events.listen(
-      this, ol.Object.getChangedEventType(ol.MapRendererProperty.LAYERS),
-      this.handleLayersChanged, false, this);
-
-  if (goog.isDef(opt_values)) {
-    this.setValues(opt_values);
-  }
-
-};
-goog.inherits(ol.MapRenderer, ol.Object);
-
-
-/**
- * @param {ol.Layer} layer Layer.
- * @protected
- * @return {ol.LayerRenderer} layerRenderer Layer renderer.
- */
-ol.MapRenderer.prototype.createLayerRenderer = goog.abstractMethod;
-
-
-/**
- * @protected
- * @param {function(this: T, ol.LayerRenderer)} f Function.
- * @param {T=} opt_obj The object to be used for the value of 'this' within f.
- * @template T
- */
-ol.MapRenderer.prototype.forEachLayerRenderer = function(f, opt_obj) {
-  var layers = this.getLayers();
-  if (goog.isDefAndNotNull(layers)) {
-    layers.forEach(function(layer) {
-      var key = goog.getUid(layer);
-      var layerRenderer = this.layerRenderers_[key];
-      f.call(opt_obj, layerRenderer);
-    }, this);
-  }
-};
-
-
-/**
- * @return {ol.Camera} Camera.
- */
-ol.MapRenderer.prototype.getCamera = function() {
-  return /** @type {ol.Camera} */ (this.get(ol.MapRendererProperty.CAMERA));
-};
-
-
-/**
- * @return {ol.Array} Layers.
- */
-ol.MapRenderer.prototype.getLayers = function() {
-  return /** @type {ol.Array} */ (this.get(ol.MapRendererProperty.LAYERS));
-};
-
-
-/**
- * @return {ol.Projection} Projection.
- */
-ol.MapRenderer.prototype.getProjection = function() {
-  return /** @type {ol.Projection} */ (
-      this.get(ol.MapRendererProperty.PROJECTION));
-};
-
-
-/**
- * @protected
- * @return {goog.math.Size} Size.
- */
-ol.MapRenderer.prototype.getSize = function() {
-  return this.size_;
-};
-
-
-/**
- * @return {HTMLDivElement} Target.
- */
-ol.MapRenderer.prototype.getTarget = function() {
-  return this.target_;
-};
-
-
-/**
- * @protected
- */
-ol.MapRenderer.prototype.handleCameraChanged = function() {
-  if (!goog.isNull(this.cameraListenerKeys_)) {
-    goog.array.forEach(this.cameraListenerKeys_, goog.events.unlistenByKey);
-    this.cameraListenerKeys_ = null;
-  }
-  var camera = this.getCamera();
-  if (goog.isDefAndNotNull(camera)) {
-    this.cameraListenerKeys_ = goog.array.map(
-        goog.object.getValues(ol.CameraProperty),
-        function(cameraProperty) {
-          return goog.events.listen(camera, cameraProperty,
-              this.handleCameraPropertyChanged, false, this);
-        },
-        this);
-  }
-};
-
-
-/**
- * @protected
- */
-ol.MapRenderer.prototype.handleCameraPropertyChanged = goog.nullFunction;
-
-
-/**
- * @param {ol.Layer} layer Layer.
- * @protected
- */
-ol.MapRenderer.prototype.handleLayerAdd = function(layer) {
-  var key = goog.getUid(layer);
-  var layerRenderer = this.createLayerRenderer(layer);
-  this.layerRenderers_[key] = layerRenderer;
-};
-
-
-/**
- * @param {ol.Layer} layer Layer.
- * @protected
- */
-ol.MapRenderer.prototype.handleLayerRemove = function(layer) {
-  var key = goog.getUid(layer);
-  goog.asserts.assert(key in this.layerRenderers_);
-  var layerRenderer = this.layerRenderers_[key];
-  delete this.layerRenderers_[key];
-  goog.dispose(layerRenderer);
-};
-
-
-/**
- * @param {ol.ArrayEvent} event Event.
- * @protected
- */
-ol.MapRenderer.prototype.handleLayersInsertAt = function(event) {
-  var layers = /** @type {ol.Array} */ (event.target);
-  var layer = /** @type {ol.Layer} */ layers.getAt(event.index);
-  this.handleLayerAdd(layer);
-};
-
-
-/**
- * @param {ol.ArrayEvent} event Event.
- * @protected
- */
-ol.MapRenderer.prototype.handleLayersRemoveAt = function(event) {
-  var layer = /** @type {ol.Layer} */ (event.prev);
-  this.handleLayerRemove(layer);
-};
-
-
-/**
- * @param {ol.ArrayEvent} event Event.
- * @protected
- */
-ol.MapRenderer.prototype.handleLayersSetAt = function(event) {
-  var prevLayer = /** @type {ol.Layer} */ (event.prev);
-  this.handleLayerRemove(prevLayer);
-  var layers = /** @type {ol.Array} */ (event.target);
-  var layer = /** @type {ol.Layer} */ layers.getAt(event.index);
-  this.handleLayerAdd(layer);
-};
-
-
-/**
- */
-ol.MapRenderer.prototype.handleLayersChanged = function() {
-  if (!goog.isNull(this.layersListenerKeys_)) {
-    goog.array.forEach(this.layersListenerKeys_, goog.events.unlistenByKey);
-    this.layersListenerKeys_ = null;
-  }
-  var layers = this.getLayers();
-  if (goog.isDefAndNotNull(layers)) {
-    this.layersListenerKeys_ = [
-      goog.events.listen(layers, ol.ArrayEventType.INSERT_AT,
-          this.handleLayersInsertAt, false, this),
-      goog.events.listen(layers, ol.ArrayEventType.REMOVE_AT,
-          this.handleLayersRemoveAt, false, this),
-      goog.events.listen(layers, ol.ArrayEventType.SET_AT,
-          this.handleLayersSetAt, false, this)
-    ];
-  }
-};
-
-
-/**
- * @param {goog.events.Event} event Event.
- * @protected
- */
-ol.MapRenderer.prototype.handleTargetResize = function(event) {
-  goog.asserts.assert(event.target == this.target_);
-  this.size_.width = this.target_.clientWidth;
-  this.size_.height = this.target_.clientHeight;
-};
-
-
-/**
- * @param {ol.Camera} camera Camera.
- */
-ol.MapRenderer.prototype.setCamera = function(camera) {
-  this.set(ol.MapRendererProperty.CAMERA, camera);
-};
-
-
-/**
- * @param {ol.Array} layers Layers.
- */
-ol.MapRenderer.prototype.setLayers = function(layers) {
-  this.set(ol.MapRendererProperty.LAYERS, layers);
-};
-
-
-/**
- * @param {ol.Projection} projection Projection.
- */
-ol.MapRenderer.prototype.setProjection = function(projection) {
-  this.set(ol.MapRendererProperty.PROJECTION, projection);
-};
diff --git a/src/ol/webglrenderer/arraybuffer.js b/src/ol/webgl/arraybuffer.js
similarity index 61%
rename from src/ol/webglrenderer/arraybuffer.js
rename to src/ol/webgl/arraybuffer.js
index 9e18c5b5ca..6f56029452 100644
--- a/src/ol/webglrenderer/arraybuffer.js
+++ b/src/ol/webgl/arraybuffer.js
@@ -1,18 +1,18 @@
-goog.provide('ol.webglrenderer.ArrayBuffer');
+goog.provide('ol.webgl.ArrayBuffer');
 
 goog.require('goog.webgl');
-goog.require('ol.webglrenderer.StaticGLObject');
+goog.require('ol.webgl.StaticGLObject');
 
 
 
 /**
  * @constructor
- * @extends {ol.webglrenderer.StaticGLObject}
+ * @extends {ol.webgl.StaticGLObject}
  * @param {WebGLRenderingContext} gl GL.
  * @param {ArrayBuffer|ArrayBufferView|null|number} data Data.
  * @param {number} usage Usage.
  */
-ol.webglrenderer.ArrayBuffer = function(gl, data, usage) {
+ol.webgl.ArrayBuffer = function(gl, data, usage) {
 
   goog.base(this, gl);
 
@@ -25,12 +25,12 @@ ol.webglrenderer.ArrayBuffer = function(gl, data, usage) {
   gl.bufferData(goog.webgl.ARRAY_BUFFER, data, usage);
 
 };
-goog.inherits(ol.webglrenderer.ArrayBuffer, ol.webglrenderer.StaticGLObject);
+goog.inherits(ol.webgl.ArrayBuffer, ol.webgl.StaticGLObject);
 
 
 /**
  */
-ol.webglrenderer.ArrayBuffer.prototype.bind = function() {
+ol.webgl.ArrayBuffer.prototype.bind = function() {
   var gl = this.getGL();
   gl.bindBuffer(goog.webgl.ARRAY_BUFFER, this.buffer_);
 };
@@ -39,7 +39,7 @@ ol.webglrenderer.ArrayBuffer.prototype.bind = function() {
 /**
  * @inheritDoc
  */
-ol.webglrenderer.ArrayBuffer.prototype.disposeInternal = function() {
+ol.webgl.ArrayBuffer.prototype.disposeInternal = function() {
   var gl = this.getGL();
   gl.deleteBuffer(this.buffer_);
   this.buffer_ = null;
diff --git a/src/ol/webglrenderer/framebuffer.js b/src/ol/webgl/framebuffer.js
similarity index 81%
rename from src/ol/webglrenderer/framebuffer.js
rename to src/ol/webgl/framebuffer.js
index c8ace09462..6e422e8b9a 100644
--- a/src/ol/webglrenderer/framebuffer.js
+++ b/src/ol/webgl/framebuffer.js
@@ -1,17 +1,17 @@
-goog.provide('ol.webglrenderer.Framebuffer');
+goog.provide('ol.webgl.Framebuffer');
 
 goog.require('goog.asserts');
 goog.require('goog.webgl');
-goog.require('ol.webglrenderer.GLObject');
+goog.require('ol.webgl.GLObject');
 
 
 
 /**
  * @constructor
- * @extends {ol.webglrenderer.GLObject}
+ * @extends {ol.webgl.GLObject}
  * @param {number} size Size.
  */
-ol.webglrenderer.Framebuffer = function(size) {
+ol.webgl.Framebuffer = function(size) {
 
   goog.base(this);
 
@@ -34,12 +34,12 @@ ol.webglrenderer.Framebuffer = function(size) {
   this.size_ = size;
 
 };
-goog.inherits(ol.webglrenderer.Framebuffer, ol.webglrenderer.GLObject);
+goog.inherits(ol.webgl.Framebuffer, ol.webgl.GLObject);
 
 
 /**
  */
-ol.webglrenderer.Framebuffer.prototype.bind = function() {
+ol.webgl.Framebuffer.prototype.bind = function() {
   var gl = this.getGL();
   var framebuffer = this.get();
   gl.bindFramebuffer(goog.webgl.FRAMEBUFFER, framebuffer);
@@ -51,7 +51,7 @@ ol.webglrenderer.Framebuffer.prototype.bind = function() {
  * @private
  * @return {WebGLTexture} Texture.
  */
-ol.webglrenderer.Framebuffer.prototype.createTexture_ = function(size) {
+ol.webgl.Framebuffer.prototype.createTexture_ = function(size) {
   var gl = this.getGL();
   var texture = gl.createTexture();
   gl.bindTexture(goog.webgl.TEXTURE_2D, this.texture_);
@@ -68,7 +68,7 @@ ol.webglrenderer.Framebuffer.prototype.createTexture_ = function(size) {
 /**
  * @return {WebGLFramebuffer} Framebuffer.
  */
-ol.webglrenderer.Framebuffer.prototype.get = function() {
+ol.webgl.Framebuffer.prototype.get = function() {
   goog.asserts.assert(!goog.isNull(this.framebuffer_));
   return this.framebuffer_;
 };
@@ -77,7 +77,7 @@ ol.webglrenderer.Framebuffer.prototype.get = function() {
 /**
  * @param {WebGLRenderingContext} gl GL.
  */
-ol.webglrenderer.Framebuffer.prototype.setGL = function(gl) {
+ol.webgl.Framebuffer.prototype.setGL = function(gl) {
   if (!goog.isNull(this.gl)) {
     if (!goog.isNull(this.framebuffer_)) {
       this.gl.deleteFramebuffer(this.framebuffer_);
@@ -102,7 +102,7 @@ ol.webglrenderer.Framebuffer.prototype.setGL = function(gl) {
 /**
  * @param {number} size Size.
  */
-ol.webglrenderer.Framebuffer.prototype.setSize = function(size) {
+ol.webgl.Framebuffer.prototype.setSize = function(size) {
   var gl = this.getGL();
   goog.asserts.assert(!(size & (size - 1)));
   if (this.size_ != size && !goog.isNull(gl)) {
diff --git a/src/ol/webglrenderer/globject.js b/src/ol/webgl/globject.js
similarity index 50%
rename from src/ol/webglrenderer/globject.js
rename to src/ol/webgl/globject.js
index 785a64d93a..2869f0eb6d 100644
--- a/src/ol/webglrenderer/globject.js
+++ b/src/ol/webgl/globject.js
@@ -1,16 +1,16 @@
-goog.provide('ol.webglrenderer.GLObject');
+goog.provide('ol.webgl.GLObject');
 
 goog.require('goog.Disposable');
-goog.require('ol.webglrenderer.IGLObject');
+goog.require('ol.webgl.IGLObject');
 
 
 
 /**
  * @constructor
  * @extends {goog.Disposable}
- * @implements {ol.webglrenderer.IGLObject}
+ * @implements {ol.webgl.IGLObject}
  */
-ol.webglrenderer.GLObject = function() {
+ol.webgl.GLObject = function() {
 
   goog.base(this);
 
@@ -21,13 +21,13 @@ ol.webglrenderer.GLObject = function() {
   this.gl_ = null;
 
 };
-goog.inherits(ol.webglrenderer.GLObject, goog.Disposable);
+goog.inherits(ol.webgl.GLObject, goog.Disposable);
 
 
 /**
  * @inheritDoc
  */
-ol.webglrenderer.GLObject.prototype.disposeInternal = function() {
+ol.webgl.GLObject.prototype.disposeInternal = function() {
   this.setGL(null);
   goog.base(this, 'disposeInternal');
 };
@@ -36,7 +36,7 @@ ol.webglrenderer.GLObject.prototype.disposeInternal = function() {
 /**
  * @inheritDoc
  */
-ol.webglrenderer.GLObject.prototype.getGL = function() {
+ol.webgl.GLObject.prototype.getGL = function() {
   goog.asserts.assert(!goog.isNull(this.gl_));
   return this.gl_;
 };
@@ -45,6 +45,6 @@ ol.webglrenderer.GLObject.prototype.getGL = function() {
 /**
  * @inheritDoc
  */
-ol.webglrenderer.GLObject.prototype.setGL = function(gl) {
+ol.webgl.GLObject.prototype.setGL = function(gl) {
   this.gl_ = gl;
 };
diff --git a/src/ol/webgl/iglobject.js b/src/ol/webgl/iglobject.js
new file mode 100644
index 0000000000..21ae391a37
--- /dev/null
+++ b/src/ol/webgl/iglobject.js
@@ -0,0 +1,20 @@
+goog.provide('ol.webgl.IGLObject');
+
+
+
+/**
+ * @interface
+ */
+ol.webgl.IGLObject = function() {};
+
+
+/**
+ * @return {WebGLRenderingContext} GL.
+ */
+ol.webgl.IGLObject.prototype.getGL = function() {};
+
+
+/**
+ * @param {WebGLRenderingContext} gl GL.
+ */
+ol.webgl.IGLObject.prototype.setGL = function(gl) {};
diff --git a/src/ol/webglrenderer/webglmaprenderer.js b/src/ol/webgl/map.js
similarity index 67%
rename from src/ol/webglrenderer/webglmaprenderer.js
rename to src/ol/webgl/map.js
index b591ddf67b..28c40bc504 100644
--- a/src/ol/webglrenderer/webglmaprenderer.js
+++ b/src/ol/webgl/map.js
@@ -1,25 +1,25 @@
-goog.provide('ol.WebGLMapRenderer');
+goog.provide('ol.webgl.Map');
 
 goog.require('goog.dom');
 goog.require('goog.dom.TagName');
 goog.require('goog.style');
 goog.require('goog.webgl');
 goog.require('ol.Layer');
-goog.require('ol.MapRenderer');
+goog.require('ol.Map');
 goog.require('ol.TileStore');
-goog.require('ol.webglrenderer.IGLObject');
-goog.require('ol.webglrenderer.TileLayerRenderer');
+goog.require('ol.webgl.IGLObject');
+goog.require('ol.webgl.TileLayerRenderer');
 
 
 
 /**
  * @constructor
- * @extends {ol.MapRenderer}
- * @implements {ol.webglrenderer.IGLObject}
+ * @extends {ol.Map}
+ * @implements {ol.webgl.IGLObject}
  * @param {!HTMLDivElement} target Target.
  * @param {Object.<string, *>=} opt_values Values.
  */
-ol.WebGLMapRenderer = function(target, opt_values) {
+ol.webgl.Map = function(target, opt_values) {
 
   goog.base(this, target);
 
@@ -55,24 +55,16 @@ ol.WebGLMapRenderer = function(target, opt_values) {
   }
 
 };
-goog.inherits(ol.WebGLMapRenderer, ol.MapRenderer);
-
-
-/**
- * @return {boolean} Is supported.
- */
-ol.WebGLMapRenderer.isSupported = function() {
-  return 'WebGLRenderingContext' in goog.global;
-};
+goog.inherits(ol.webgl.Map, ol.Map);
 
 
 /**
  * @inheritDoc
  */
-ol.WebGLMapRenderer.prototype.createLayerRenderer = function(layer) {
+ol.webgl.Map.prototype.createLayerRenderer = function(layer) {
   var store = layer.getStore();
   if (store instanceof ol.TileStore) {
-    return new ol.webglrenderer.TileLayerRenderer(layer, this.getGL());
+    return new ol.webgl.TileLayerRenderer(layer, this.getGL());
   } else {
     goog.asserts.assert(false);
     return null;
@@ -83,7 +75,7 @@ ol.WebGLMapRenderer.prototype.createLayerRenderer = function(layer) {
 /**
  * @inheritDoc
  */
-ol.WebGLMapRenderer.prototype.disposeInternal = function() {
+ol.webgl.Map.prototype.disposeInternal = function() {
   this.setGL(null);
   goog.base(this, 'disposeInternal');
 };
@@ -92,7 +84,7 @@ ol.WebGLMapRenderer.prototype.disposeInternal = function() {
 /**
  * @inheritDoc
  */
-ol.WebGLMapRenderer.prototype.getGL = function() {
+ol.webgl.Map.prototype.getGL = function() {
   var gl = this.gl_;
   goog.asserts.assert(!goog.isNull(gl));
   return gl;
@@ -102,7 +94,7 @@ ol.WebGLMapRenderer.prototype.getGL = function() {
 /**
  * @inheritDoc
  */
-ol.WebGLMapRenderer.prototype.handleCameraPropertyChanged = function() {
+ol.webgl.Map.prototype.handleCameraPropertyChanged = function() {
   this.redraw_();
 };
 
@@ -110,7 +102,7 @@ ol.WebGLMapRenderer.prototype.handleCameraPropertyChanged = function() {
 /**
  * @inheritDoc
  */
-ol.WebGLMapRenderer.prototype.handleLayerAdd = function(layer) {
+ol.webgl.Map.prototype.handleLayerAdd = function(layer) {
   goog.base(this, 'handleLayerAdd', layer);
   this.redraw_();
 };
@@ -119,7 +111,7 @@ ol.WebGLMapRenderer.prototype.handleLayerAdd = function(layer) {
 /**
  * @inheritDoc
  */
-ol.WebGLMapRenderer.prototype.handleLayerRemove = function(layer) {
+ol.webgl.Map.prototype.handleLayerRemove = function(layer) {
   goog.base(this, 'handleLayerRemove', layer);
   this.redraw_();
 };
@@ -128,7 +120,7 @@ ol.WebGLMapRenderer.prototype.handleLayerRemove = function(layer) {
 /**
  * @inheritDoc
  */
-ol.WebGLMapRenderer.prototype.handleTargetResize = function(event) {
+ol.webgl.Map.prototype.handleTargetResize = function(event) {
   goog.base(this, 'handleTargetResize', event);
   this.updateSize_();
 };
@@ -137,7 +129,7 @@ ol.WebGLMapRenderer.prototype.handleTargetResize = function(event) {
 /**
  * @private
  */
-ol.WebGLMapRenderer.prototype.redraw_ = function() {
+ol.webgl.Map.prototype.redraw_ = function() {
 
   var gl = this.getGL();
 
@@ -149,7 +141,7 @@ ol.WebGLMapRenderer.prototype.redraw_ = function() {
 /**
  * @inheritDoc
  */
-ol.WebGLMapRenderer.prototype.setGL = function(gl) {
+ol.webgl.Map.prototype.setGL = function(gl) {
   if (!goog.isNull(this.gl_)) {
     this.gl_ = null;
   }
@@ -171,7 +163,7 @@ ol.WebGLMapRenderer.prototype.setGL = function(gl) {
 /**
  * @private
  */
-ol.WebGLMapRenderer.prototype.updateSize_ = function() {
+ol.webgl.Map.prototype.updateSize_ = function() {
   var size = this.getSize();
   this.canvas_.width = size.width;
   this.canvas_.height = size.height;
diff --git a/src/ol/webglrenderer/program.js b/src/ol/webgl/program.js
similarity index 61%
rename from src/ol/webglrenderer/program.js
rename to src/ol/webgl/program.js
index 4b625dcae2..39f75ab037 100644
--- a/src/ol/webglrenderer/program.js
+++ b/src/ol/webgl/program.js
@@ -1,33 +1,33 @@
-goog.provide('ol.webglrenderer.Program');
+goog.provide('ol.webgl.Program');
 
 goog.require('goog.asserts');
 goog.require('goog.webgl');
-goog.require('ol.webglrenderer.GLObject');
-goog.require('ol.webglrenderer.VertexAttrib');
-goog.require('ol.webglrenderer.shader.Fragment');
-goog.require('ol.webglrenderer.shader.Vertex');
+goog.require('ol.webgl.GLObject');
+goog.require('ol.webgl.VertexAttrib');
+goog.require('ol.webgl.shader.Fragment');
+goog.require('ol.webgl.shader.Vertex');
 
 
 
 /**
  * @constructor
- * @extends {ol.webglrenderer.GLObject}
- * @param {ol.webglrenderer.shader.Fragment} fragmentShader Fragment shader.
- * @param {ol.webglrenderer.shader.Vertex} vertexShader Vertex shader.
+ * @extends {ol.webgl.GLObject}
+ * @param {ol.webgl.shader.Fragment} fragmentShader Fragment shader.
+ * @param {ol.webgl.shader.Vertex} vertexShader Vertex shader.
  */
-ol.webglrenderer.Program = function(fragmentShader, vertexShader) {
+ol.webgl.Program = function(fragmentShader, vertexShader) {
 
   goog.base(this);
 
   /**
    * @private
-   * @type {ol.webglrenderer.shader.Fragment}
+   * @type {ol.webgl.shader.Fragment}
    */
   this.fragmentShader_ = fragmentShader;
 
   /**
    * @private
-   * @type {ol.webglrenderer.shader.Vertex}
+   * @type {ol.webgl.shader.Vertex}
    */
   this.vertexShader_ = vertexShader;
 
@@ -38,13 +38,13 @@ ol.webglrenderer.Program = function(fragmentShader, vertexShader) {
   this.program_ = null;
 
 };
-goog.inherits(ol.webglrenderer.Program, ol.webglrenderer.GLObject);
+goog.inherits(ol.webgl.Program, ol.webgl.GLObject);
 
 
 /**
  * @inheritDoc
  */
-ol.webglrenderer.Program.prototype.setGL = function(gl) {
+ol.webgl.Program.prototype.setGL = function(gl) {
   if (!goog.isNull(this.gl)) {
     if (!goog.isNull(this.program_)) {
       this.gl.deleteProgram(this.program_);
@@ -73,7 +73,7 @@ ol.webglrenderer.Program.prototype.setGL = function(gl) {
 
 /**
  */
-ol.webglrenderer.Program.prototype.use = function() {
+ol.webgl.Program.prototype.use = function() {
   var gl = this.getGL();
   gl.useProgram(this.program_);
 };
diff --git a/src/ol/webglrenderer/programcache.js b/src/ol/webgl/programcache.js
similarity index 50%
rename from src/ol/webglrenderer/programcache.js
rename to src/ol/webgl/programcache.js
index 0cd9ef9ded..9e08deb9d8 100644
--- a/src/ol/webglrenderer/programcache.js
+++ b/src/ol/webgl/programcache.js
@@ -1,38 +1,38 @@
-goog.provide('ol.webglrenderer.ProgramCache');
+goog.provide('ol.webgl.ProgramCache');
 
 goog.require('goog.dispose');
 goog.require('goog.object');
-goog.require('ol.webglrenderer.GLObject');
-goog.require('ol.webglrenderer.Program');
-goog.require('ol.webglrenderer.shader.Fragment');
-goog.require('ol.webglrenderer.shader.Vertex');
+goog.require('ol.webgl.GLObject');
+goog.require('ol.webgl.Program');
+goog.require('ol.webgl.shader.Fragment');
+goog.require('ol.webgl.shader.Vertex');
 
 
 
 /**
  * @constructor
- * @extends {ol.webglrenderer.GLObject}
+ * @extends {ol.webgl.GLObject}
  */
-ol.webglrenderer.ProgramCache = function() {
+ol.webgl.ProgramCache = function() {
 
   goog.base(this);
 
   /**
    * @private
-   * @type {Object.<string, Object.<string, ol.webglrenderer.Program>>}
+   * @type {Object.<string, Object.<string, ol.webgl.Program>>}
    */
   this.programss_ = {};
 
 };
-goog.inherits(ol.webglrenderer.ProgramCache, ol.webglrenderer.GLObject);
+goog.inherits(ol.webgl.ProgramCache, ol.webgl.GLObject);
 
 
 /**
- * @param {ol.webglrenderer.shader.Fragment} fragmentShader Fragment shader.
- * @param {ol.webglrenderer.shader.Vertex} vertexShader Vertex shader.
- * @return {ol.webglrenderer.Program} Program.
+ * @param {ol.webgl.shader.Fragment} fragmentShader Fragment shader.
+ * @param {ol.webgl.shader.Vertex} vertexShader Vertex shader.
+ * @return {ol.webgl.Program} Program.
  */
-ol.webglrenderer.ProgramCache.prototype.get =
+ol.webgl.ProgramCache.prototype.get =
     function(fragmentShader, vertexShader) {
   var program, programs;
   var fragmentShaderKey = goog.getUid(fragmentShader);
@@ -46,7 +46,7 @@ ol.webglrenderer.ProgramCache.prototype.get =
   if (vertexShaderKey in programs) {
     program = programs[vertexShaderKey];
   } else {
-    program = new ol.webglrenderer.Program(fragmentShader, vertexShader);
+    program = new ol.webgl.Program(fragmentShader, vertexShader);
     programs[vertexShaderKey] = program;
   }
   return program;
@@ -56,7 +56,7 @@ ol.webglrenderer.ProgramCache.prototype.get =
 /**
  * @inheritDoc
  */
-ol.webglrenderer.ProgramCache.prototype.setGL = function(gl) {
+ol.webgl.ProgramCache.prototype.setGL = function(gl) {
   goog.object.forEach(this.programss_, function(programs) {
     goog.disposeAll(goog.object.getValues(programs));
   });
diff --git a/src/ol/webglrenderer/shader.js b/src/ol/webgl/shader.js
similarity index 65%
rename from src/ol/webglrenderer/shader.js
rename to src/ol/webgl/shader.js
index d41c739339..8d3ceb4031 100644
--- a/src/ol/webglrenderer/shader.js
+++ b/src/ol/webgl/shader.js
@@ -1,20 +1,20 @@
-goog.provide('ol.webglrenderer.Shader');
+goog.provide('ol.webgl.Shader');
 
 goog.require('goog.array');
 goog.require('goog.asserts');
 goog.require('goog.webgl');
-goog.require('ol.webglrenderer.GLObject');
-goog.require('ol.webglrenderer.Uniform');
+goog.require('ol.webgl.GLObject');
+goog.require('ol.webgl.Uniform');
 
 
 
 /**
  * @constructor
- * @extends {ol.webglrenderer.GLObject}
+ * @extends {ol.webgl.GLObject}
  * @param {string} source Source.
- * @param {Array.<ol.webglrenderer.Uniform>=} opt_uniforms Uniforms.
+ * @param {Array.<ol.webgl.Uniform>=} opt_uniforms Uniforms.
  */
-ol.webglrenderer.Shader = function(source, opt_uniforms) {
+ol.webgl.Shader = function(source, opt_uniforms) {
 
   goog.base(this);
 
@@ -32,17 +32,17 @@ ol.webglrenderer.Shader = function(source, opt_uniforms) {
 
   /**
    * @private
-   * @type {Array.<ol.webglrenderer.Uniform>}
+   * @type {Array.<ol.webgl.Uniform>}
    */
   this.uniforms_ = opt_uniforms || [];
 
 };
-goog.inherits(ol.webglrenderer.Shader, ol.webglrenderer.GLObject);
+goog.inherits(ol.webgl.Shader, ol.webgl.GLObject);
 
 
 /**
  */
-ol.webglrenderer.Shader.prototype.compile = function() {
+ol.webgl.Shader.prototype.compile = function() {
   var gl = this.getGL();
   this.shader_ = this.create();
   gl.shaderSource(this.shader_, this.source_);
@@ -59,13 +59,13 @@ ol.webglrenderer.Shader.prototype.compile = function() {
  * @protected
  * @return {WebGLShader} Shader.
  */
-ol.webglrenderer.Shader.prototype.create = goog.abstractMethod;
+ol.webgl.Shader.prototype.create = goog.abstractMethod;
 
 
 /**
  * @return {WebGLShader} Shader.
  */
-ol.webglrenderer.Shader.prototype.get = function() {
+ol.webgl.Shader.prototype.get = function() {
   return this.shader_;
 };
 
@@ -73,7 +73,7 @@ ol.webglrenderer.Shader.prototype.get = function() {
 /**
  * @return {boolean} Is animated?
  */
-ol.webglrenderer.Shader.prototype.isAnimated = function() {
+ol.webgl.Shader.prototype.isAnimated = function() {
   return false;
 };
 
@@ -81,7 +81,7 @@ ol.webglrenderer.Shader.prototype.isAnimated = function() {
 /**
  * @inheritDoc
  */
-ol.webglrenderer.Shader.prototype.setGL = function(gl) {
+ol.webgl.Shader.prototype.setGL = function(gl) {
   if (!goog.isNull(this.gl)) {
     goog.array.forEach(this.uniforms_, function(uniform) {
       uniform.setGL(null);
@@ -104,7 +104,7 @@ ol.webglrenderer.Shader.prototype.setGL = function(gl) {
 /**
  * @param {WebGLProgram} program Program.
  */
-ol.webglrenderer.Shader.prototype.setProgram = function(program) {
+ol.webgl.Shader.prototype.setProgram = function(program) {
   goog.array.forEach(this.uniforms_, function(uniform) {
     uniform.setProgram(program);
   });
@@ -113,5 +113,5 @@ ol.webglrenderer.Shader.prototype.setProgram = function(program) {
 
 /**
  */
-ol.webglrenderer.Shader.prototype.setUniforms = function() {
+ol.webgl.Shader.prototype.setUniforms = function() {
 };
diff --git a/src/ol/webgl/shader/fragment.js b/src/ol/webgl/shader/fragment.js
new file mode 100644
index 0000000000..f9999eeb4e
--- /dev/null
+++ b/src/ol/webgl/shader/fragment.js
@@ -0,0 +1,27 @@
+goog.provide('ol.webgl.shader.Fragment');
+
+goog.require('goog.asserts');
+goog.require('ol.webgl.Shader');
+
+
+
+/**
+ * @constructor
+ * @extends {ol.webgl.Shader}
+ * @param {string} source Source.
+ * @param {Array.<ol.webgl.Uniform>=} opt_uniforms Uniforms.
+ */
+ol.webgl.shader.Fragment = function(source, opt_uniforms) {
+  goog.base(this, source, opt_uniforms);
+};
+goog.inherits(ol.webgl.shader.Fragment, ol.webgl.Shader);
+
+
+/**
+ * @protected
+ * @return {WebGLShader} Shader.
+ */
+ol.webgl.shader.Fragment.prototype.create = function() {
+  var gl = this.getGL();
+  return gl.createShader(gl.FRAGMENT_SHADER);
+};
diff --git a/src/ol/webgl/shader/vertex.js b/src/ol/webgl/shader/vertex.js
new file mode 100644
index 0000000000..e7ffb923a1
--- /dev/null
+++ b/src/ol/webgl/shader/vertex.js
@@ -0,0 +1,27 @@
+goog.provide('ol.webgl.shader.Vertex');
+
+goog.require('goog.asserts');
+goog.require('ol.webgl.Shader');
+
+
+
+/**
+ * @constructor
+ * @extends {ol.webgl.Shader}
+ * @param {string} source Source.
+ * @param {Array.<ol.webgl.Uniform>=} opt_uniforms Uniforms.
+ */
+ol.webgl.shader.Vertex = function(source, opt_uniforms) {
+  goog.base(this, source, opt_uniforms);
+};
+goog.inherits(ol.webgl.shader.Vertex, ol.webgl.Shader);
+
+
+/**
+ * @protected
+ * @return {WebGLShader} Shader.
+ */
+ol.webgl.shader.Vertex.prototype.create = function() {
+  var gl = this.getGL();
+  return gl.createShader(gl.VERTEX_SHADER);
+};
diff --git a/src/ol/webglrenderer/staticglobject.js b/src/ol/webgl/staticglobject.js
similarity index 59%
rename from src/ol/webglrenderer/staticglobject.js
rename to src/ol/webgl/staticglobject.js
index b94b6daf33..8ae0c391d7 100644
--- a/src/ol/webglrenderer/staticglobject.js
+++ b/src/ol/webgl/staticglobject.js
@@ -1,4 +1,4 @@
-goog.provide('ol.webglrenderer.StaticGLObject');
+goog.provide('ol.webgl.StaticGLObject');
 
 goog.require('goog.Disposable');
 
@@ -9,7 +9,7 @@ goog.require('goog.Disposable');
  * @extends {goog.Disposable}
  * @param {WebGLRenderingContext} gl GL.
  */
-ol.webglrenderer.StaticGLObject = function(gl) {
+ol.webgl.StaticGLObject = function(gl) {
 
   goog.asserts.assert(!goog.isNull(gl));
 
@@ -20,13 +20,13 @@ ol.webglrenderer.StaticGLObject = function(gl) {
   this.gl = gl;
 
 };
-goog.inherits(ol.webglrenderer.StaticGLObject, goog.Disposable);
+goog.inherits(ol.webgl.StaticGLObject, goog.Disposable);
 
 
 /**
  * @inheritDoc
  */
-ol.webglrenderer.StaticGLObject.prototype.disposeInternal = function() {
+ol.webgl.StaticGLObject.prototype.disposeInternal = function() {
   this.gl = null;
   goog.base(this, 'disposeInternal');
 };
@@ -35,7 +35,7 @@ ol.webglrenderer.StaticGLObject.prototype.disposeInternal = function() {
 /**
  * @return {!WebGLRenderingContext} GL.
  */
-ol.webglrenderer.StaticGLObject.prototype.getGL = function() {
+ol.webgl.StaticGLObject.prototype.getGL = function() {
   goog.asserts.assert(!goog.isNull(this.gl));
   return this.gl;
 };
@@ -44,6 +44,6 @@ ol.webglrenderer.StaticGLObject.prototype.getGL = function() {
 /**
  * @return {WebGLRenderingContext} GL.
  */
-ol.webglrenderer.StaticGLObject.prototype.unsafeGetGL = function() {
+ol.webgl.StaticGLObject.prototype.unsafeGetGL = function() {
   return this.gl;
 };
diff --git a/src/ol/webglrenderer/texture.js b/src/ol/webgl/texture.js
similarity index 75%
rename from src/ol/webglrenderer/texture.js
rename to src/ol/webgl/texture.js
index 6531189ae5..cf8a792ede 100644
--- a/src/ol/webglrenderer/texture.js
+++ b/src/ol/webgl/texture.js
@@ -1,16 +1,16 @@
-goog.provide('ol.webglrenderer.Texture');
+goog.provide('ol.webgl.Texture');
 
 goog.require('goog.asserts');
-goog.require('ol.webglrenderer.GLObject');
+goog.require('ol.webgl.GLObject');
 
 
 
 /**
  * @constructor
- * @extends {ol.webglrenderer.GLObject}
+ * @extends {ol.webgl.GLObject}
  * @param {Image} image Image.
  */
-ol.webglrenderer.Texture = function(image) {
+ol.webgl.Texture = function(image) {
 
   goog.base(this);
 
@@ -27,12 +27,12 @@ ol.webglrenderer.Texture = function(image) {
   this.image_ = image;
 
 };
-goog.inherits(ol.webglrenderer.Texture, ol.webglrenderer.GLObject);
+goog.inherits(ol.webgl.Texture, ol.webgl.GLObject);
 
 
 /**
  */
-ol.webglrenderer.Texture.prototype.bind = function() {
+ol.webgl.Texture.prototype.bind = function() {
   var gl = this.getGL();
   if (goog.isNull(this.texture_)) {
     var texture = gl.createTexture();
@@ -53,7 +53,7 @@ ol.webglrenderer.Texture.prototype.bind = function() {
 /**
  * @inheritDoc
  */
-ol.webglrenderer.Texture.prototype.setGL = function(gl) {
+ol.webgl.Texture.prototype.setGL = function(gl) {
   if (!goog.isNull(this.gl)) {
     if (!goog.isNull(this.texture_)) {
       this.gl.deleteTexture(this.texture_);
diff --git a/src/ol/webglrenderer/tilelayerrenderer.js b/src/ol/webgl/tilelayerrenderer.js
similarity index 51%
rename from src/ol/webglrenderer/tilelayerrenderer.js
rename to src/ol/webgl/tilelayerrenderer.js
index b91b8cefb3..dbdec85aa3 100644
--- a/src/ol/webglrenderer/tilelayerrenderer.js
+++ b/src/ol/webgl/tilelayerrenderer.js
@@ -1,19 +1,19 @@
-goog.provide('ol.webglrenderer.TileLayerRenderer');
+goog.provide('ol.webgl.TileLayerRenderer');
 
 goog.require('goog.events.EventType');
 goog.require('ol.LayerRenderer');
-goog.require('ol.webglrenderer.IGLObject');
+goog.require('ol.webgl.IGLObject');
 
 
 
 /**
  * @constructor
  * @extends {ol.LayerRenderer}
- * @implements {ol.webglrenderer.IGLObject}
+ * @implements {ol.webgl.IGLObject}
  * @param {ol.Layer} layer Layer.
  * @param {WebGLRenderingContext} gl GL.
  */
-ol.webglrenderer.TileLayerRenderer = function(layer, gl) {
+ol.webgl.TileLayerRenderer = function(layer, gl) {
 
   goog.base(this, layer);
 
@@ -26,13 +26,13 @@ ol.webglrenderer.TileLayerRenderer = function(layer, gl) {
   this.setGL(gl);
 
 };
-goog.inherits(ol.webglrenderer.TileLayerRenderer, ol.LayerRenderer);
+goog.inherits(ol.webgl.TileLayerRenderer, ol.LayerRenderer);
 
 
 /**
  * @protected
  */
-ol.webglrenderer.TileLayerRenderer.prototype.dispatchChangeEvent = function() {
+ol.webgl.TileLayerRenderer.prototype.dispatchChangeEvent = function() {
   this.dispatchEvent(goog.events.EventType.CHANGE);
 };
 
@@ -40,7 +40,7 @@ ol.webglrenderer.TileLayerRenderer.prototype.dispatchChangeEvent = function() {
 /**
  * @inheritDoc
  */
-ol.webglrenderer.TileLayerRenderer.prototype.getGL = function() {
+ol.webgl.TileLayerRenderer.prototype.getGL = function() {
   return this.gl_;
 };
 
@@ -48,7 +48,7 @@ ol.webglrenderer.TileLayerRenderer.prototype.getGL = function() {
 /**
  * @inheritDoc
  */
-ol.webglrenderer.TileLayerRenderer.prototype.handleLayerOpacityChange =
+ol.webgl.TileLayerRenderer.prototype.handleLayerOpacityChange =
     function() {
   this.dispatchChangeEvent();
 };
@@ -57,7 +57,7 @@ ol.webglrenderer.TileLayerRenderer.prototype.handleLayerOpacityChange =
 /**
  * @inheritDoc
  */
-ol.webglrenderer.TileLayerRenderer.prototype.handleLayerVisibleChange =
+ol.webgl.TileLayerRenderer.prototype.handleLayerVisibleChange =
     function() {
   this.dispatchChangeEvent();
 };
@@ -66,6 +66,6 @@ ol.webglrenderer.TileLayerRenderer.prototype.handleLayerVisibleChange =
 /**
  * @inheritDoc
  */
-ol.webglrenderer.TileLayerRenderer.prototype.setGL = function(gl) {
+ol.webgl.TileLayerRenderer.prototype.setGL = function(gl) {
   this.gl_ = gl;
 };
diff --git a/src/ol/webglrenderer/uniform.js b/src/ol/webgl/uniform.js
similarity index 67%
rename from src/ol/webglrenderer/uniform.js
rename to src/ol/webgl/uniform.js
index ca33224478..434eac9ed8 100644
--- a/src/ol/webglrenderer/uniform.js
+++ b/src/ol/webgl/uniform.js
@@ -1,17 +1,17 @@
-goog.provide('ol.webglrenderer.Uniform');
+goog.provide('ol.webgl.Uniform');
 
 goog.require('goog.asserts');
 goog.require('goog.vec.Mat4');
-goog.require('ol.webglrenderer.GLObject');
+goog.require('ol.webgl.GLObject');
 
 
 
 /**
  * @constructor
- * @extends {ol.webglrenderer.GLObject}
+ * @extends {ol.webgl.GLObject}
  * @param {string} name Name.
  */
-ol.webglrenderer.Uniform = function(name) {
+ol.webgl.Uniform = function(name) {
 
   goog.base(this);
 
@@ -34,13 +34,13 @@ ol.webglrenderer.Uniform = function(name) {
   this.location_ = null;
 
 };
-goog.inherits(ol.webglrenderer.Uniform, ol.webglrenderer.GLObject);
+goog.inherits(ol.webgl.Uniform, ol.webgl.GLObject);
 
 
 /**
  * @return {string} Name.
  */
-ol.webglrenderer.Uniform.prototype.getName = function() {
+ol.webgl.Uniform.prototype.getName = function() {
   return this.name_;
 };
 
@@ -48,7 +48,7 @@ ol.webglrenderer.Uniform.prototype.getName = function() {
 /**
  * @param {WebGLRenderingContext} gl GL.
  */
-ol.webglrenderer.Uniform.prototype.setGL = function(gl) {
+ol.webgl.Uniform.prototype.setGL = function(gl) {
   this.location_ = null;
   goog.base(this, 'setGL', gl);
 };
@@ -57,7 +57,7 @@ ol.webglrenderer.Uniform.prototype.setGL = function(gl) {
 /**
  * @param {number} value Value.
  */
-ol.webglrenderer.Uniform.prototype.set1f = function(value) {
+ol.webgl.Uniform.prototype.set1f = function(value) {
   var gl = this.getGL();
   if (!goog.isNull(this.location_)) {
     gl.uniform1f(this.location_, value);
@@ -68,7 +68,7 @@ ol.webglrenderer.Uniform.prototype.set1f = function(value) {
 /**
  * @param {number} value Value.
  */
-ol.webglrenderer.Uniform.prototype.set1i = function(value) {
+ol.webgl.Uniform.prototype.set1i = function(value) {
   var gl = this.getGL();
   if (!goog.isNull(this.location_)) {
     gl.uniform1i(this.location_, value);
@@ -80,7 +80,7 @@ ol.webglrenderer.Uniform.prototype.set1i = function(value) {
  * @param {boolean} transpose Transpose.
  * @param {goog.vec.Mat4.Mat4Like} value Value.
  */
-ol.webglrenderer.Uniform.prototype.setMatrix4fv = function(transpose, value) {
+ol.webgl.Uniform.prototype.setMatrix4fv = function(transpose, value) {
   var gl = this.getGL();
   if (!goog.isNull(this.location_)) {
     gl.uniformMatrix4fv(this.location_, transpose, value);
@@ -91,7 +91,7 @@ ol.webglrenderer.Uniform.prototype.setMatrix4fv = function(transpose, value) {
 /**
  * @param {WebGLProgram} program Program.
  */
-ol.webglrenderer.Uniform.prototype.setProgram = function(program) {
+ol.webgl.Uniform.prototype.setProgram = function(program) {
   if (goog.isNull(program)) {
     this.location_ = null;
   } else {
diff --git a/src/ol/webglrenderer/vertexattrib.js b/src/ol/webgl/vertexattrib.js
similarity index 69%
rename from src/ol/webglrenderer/vertexattrib.js
rename to src/ol/webgl/vertexattrib.js
index 9aabef8700..cb02476041 100644
--- a/src/ol/webglrenderer/vertexattrib.js
+++ b/src/ol/webgl/vertexattrib.js
@@ -1,16 +1,16 @@
-goog.provide('ol.webglrenderer.VertexAttrib');
+goog.provide('ol.webgl.VertexAttrib');
 
 goog.require('goog.asserts');
-goog.require('ol.webglrenderer.GLObject');
+goog.require('ol.webgl.GLObject');
 
 
 
 /**
  * @constructor
- * @extends {ol.webglrenderer.GLObject}
+ * @extends {ol.webgl.GLObject}
  * @param {string} name Name.
  */
-ol.webglrenderer.VertexAttrib = function(name) {
+ol.webgl.VertexAttrib = function(name) {
 
   goog.base(this);
 
@@ -27,12 +27,12 @@ ol.webglrenderer.VertexAttrib = function(name) {
   this.location_ = -1;
 
 };
-goog.inherits(ol.webglrenderer.VertexAttrib, ol.webglrenderer.GLObject);
+goog.inherits(ol.webgl.VertexAttrib, ol.webgl.GLObject);
 
 
 /**
  */
-ol.webglrenderer.VertexAttrib.prototype.enableArray = function() {
+ol.webgl.VertexAttrib.prototype.enableArray = function() {
   var gl = this.getGL();
   goog.asserts.assert(this.location_ != -1);
   gl.enableVertexAttribArray(this.location_);
@@ -46,7 +46,7 @@ ol.webglrenderer.VertexAttrib.prototype.enableArray = function() {
  * @param {number} stride Stride.
  * @param {number} offset Offset.
  */
-ol.webglrenderer.VertexAttrib.prototype.pointer =
+ol.webgl.VertexAttrib.prototype.pointer =
     function(size, type, normalize, stride, offset) {
   var gl = this.getGL();
   goog.asserts.assert(this.location_ != -1);
@@ -58,7 +58,7 @@ ol.webglrenderer.VertexAttrib.prototype.pointer =
 /**
  * @param {WebGLRenderingContext} gl GL.
  */
-ol.webglrenderer.VertexAttrib.prototype.setGL = function(gl) {
+ol.webgl.VertexAttrib.prototype.setGL = function(gl) {
   this.location_ = -1;
   goog.base(this, 'setGL', gl);
 };
@@ -67,7 +67,7 @@ ol.webglrenderer.VertexAttrib.prototype.setGL = function(gl) {
 /**
  * @param {WebGLProgram} program Program.
  */
-ol.webglrenderer.VertexAttrib.prototype.setProgram = function(program) {
+ol.webgl.VertexAttrib.prototype.setProgram = function(program) {
   if (goog.isNull(program)) {
     this.location_ = -1;
   } else {
diff --git a/src/ol/webgl/webgl.js b/src/ol/webgl/webgl.js
new file mode 100644
index 0000000000..0693475c4a
--- /dev/null
+++ b/src/ol/webgl/webgl.js
@@ -0,0 +1,9 @@
+goog.provide('ol.webgl');
+
+
+/**
+ * @return {boolean} Is supported.
+ */
+ol.webgl.isSupported = function() {
+  return 'WebGLRenderingContext' in goog.global;
+};
diff --git a/src/ol/webglrenderer/iglobject.js b/src/ol/webglrenderer/iglobject.js
deleted file mode 100644
index ea5a88f798..0000000000
--- a/src/ol/webglrenderer/iglobject.js
+++ /dev/null
@@ -1,20 +0,0 @@
-goog.provide('ol.webglrenderer.IGLObject');
-
-
-
-/**
- * @interface
- */
-ol.webglrenderer.IGLObject = function() {};
-
-
-/**
- * @return {WebGLRenderingContext} GL.
- */
-ol.webglrenderer.IGLObject.prototype.getGL = function() {};
-
-
-/**
- * @param {WebGLRenderingContext} gl GL.
- */
-ol.webglrenderer.IGLObject.prototype.setGL = function(gl) {};
diff --git a/src/ol/webglrenderer/shader/fragment.js b/src/ol/webglrenderer/shader/fragment.js
deleted file mode 100644
index d68e671578..0000000000
--- a/src/ol/webglrenderer/shader/fragment.js
+++ /dev/null
@@ -1,27 +0,0 @@
-goog.provide('ol.webglrenderer.shader.Fragment');
-
-goog.require('goog.asserts');
-goog.require('ol.webglrenderer.Shader');
-
-
-
-/**
- * @constructor
- * @extends {ol.webglrenderer.Shader}
- * @param {string} source Source.
- * @param {Array.<ol.webglrenderer.Uniform>=} opt_uniforms Uniforms.
- */
-ol.webglrenderer.shader.Fragment = function(source, opt_uniforms) {
-  goog.base(this, source, opt_uniforms);
-};
-goog.inherits(ol.webglrenderer.shader.Fragment, ol.webglrenderer.Shader);
-
-
-/**
- * @protected
- * @return {WebGLShader} Shader.
- */
-ol.webglrenderer.shader.Fragment.prototype.create = function() {
-  var gl = this.getGL();
-  return gl.createShader(gl.FRAGMENT_SHADER);
-};
diff --git a/src/ol/webglrenderer/shader/vertex.js b/src/ol/webglrenderer/shader/vertex.js
deleted file mode 100644
index f234778882..0000000000
--- a/src/ol/webglrenderer/shader/vertex.js
+++ /dev/null
@@ -1,27 +0,0 @@
-goog.provide('ol.webglrenderer.shader.Vertex');
-
-goog.require('goog.asserts');
-goog.require('ol.webglrenderer.Shader');
-
-
-
-/**
- * @constructor
- * @extends {ol.webglrenderer.Shader}
- * @param {string} source Source.
- * @param {Array.<ol.webglrenderer.Uniform>=} opt_uniforms Uniforms.
- */
-ol.webglrenderer.shader.Vertex = function(source, opt_uniforms) {
-  goog.base(this, source, opt_uniforms);
-};
-goog.inherits(ol.webglrenderer.shader.Vertex, ol.webglrenderer.Shader);
-
-
-/**
- * @protected
- * @return {WebGLShader} Shader.
- */
-ol.webglrenderer.shader.Vertex.prototype.create = function() {
-  var gl = this.getGL();
-  return gl.createShader(gl.VERTEX_SHADER);
-};