Remove use of goog.vec.*

2016-06-22 09:14:53 +02:00
parent 55edf4003f
commit cf7ff841a7
36 changed files with 511 additions and 412 deletions
--- a/src/ol/renderer/canvas/canvasimagelayerrenderer.js
+++ b/src/ol/renderer/canvas/canvasimagelayerrenderer.js
@@ -1,7 +1,7 @@
 goog.provide('ol.renderer.canvas.ImageLayer');

 goog.require('goog.asserts');
-goog.require('goog.vec.Mat4');
+goog.require('ol.matrix');
 goog.require('ol.functions');
 goog.require('ol.ImageBase');
 goog.require('ol.ViewHint');
@@ -11,7 +11,6 @@ goog.require('ol.layer.Image');
 goog.require('ol.proj');
 goog.require('ol.renderer.canvas.Layer');
 goog.require('ol.source.ImageVector');
-goog.require('ol.vec.Mat4');


 /**
@@ -31,13 +30,13 @@ ol.renderer.canvas.ImageLayer = function(imageLayer) {

  /**
   * @private
-   * @type {!goog.vec.Mat4.Number}
+   * @type {ol.Matrix}
   */
-  this.imageTransform_ = goog.vec.Mat4.createNumber();
+  this.imageTransform_ = ol.matrix.create();

  /**
   * @private
-   * @type {?goog.vec.Mat4.Number}
+   * @type {?ol.Matrix}
   */
  this.imageTransformInv_ = null;

@@ -84,7 +83,7 @@ ol.renderer.canvas.ImageLayer.prototype.forEachLayerAtPixel = function(pixel, fr
    // for ImageVector sources use the original hit-detection logic,
    // so that for example also transparent polygons are detected
    var coordinate = pixel.slice();
-    ol.vec.Mat4.multVec2(
+    ol.matrix.multVec2(
        frameState.pixelToCoordinateMatrix, coordinate, coordinate);
    var hasFeature = this.forEachFeatureAtCoordinate(
        coordinate, frameState, ol.functions.TRUE, this);
@@ -97,8 +96,8 @@ ol.renderer.canvas.ImageLayer.prototype.forEachLayerAtPixel = function(pixel, fr
  } else {
    // for all other image sources directly check the image
    if (!this.imageTransformInv_) {
-      this.imageTransformInv_ = goog.vec.Mat4.createNumber();
-      goog.vec.Mat4.invert(this.imageTransform_, this.imageTransformInv_);
+      this.imageTransformInv_ = ol.matrix.create();
+      ol.matrix.invert(this.imageTransform_, this.imageTransformInv_);
    }

    var pixelOnCanvas =
@@ -190,7 +189,7 @@ ol.renderer.canvas.ImageLayer.prototype.prepareFrame = function(frameState, laye
    var imagePixelRatio = image.getPixelRatio();
    var scale = pixelRatio * imageResolution /
        (viewResolution * imagePixelRatio);
-    ol.vec.Mat4.makeTransform2D(this.imageTransform_,
+    ol.matrix.makeTransform(this.imageTransform_,
        pixelRatio * frameState.size[0] / 2,
        pixelRatio * frameState.size[1] / 2,
        scale, scale,
--- a/src/ol/renderer/canvas/canvaslayerrenderer.js
+++ b/src/ol/renderer/canvas/canvaslayerrenderer.js
@@ -1,7 +1,7 @@
 goog.provide('ol.renderer.canvas.Layer');

 goog.require('goog.asserts');
-goog.require('goog.vec.Mat4');
+goog.require('ol.matrix');
 goog.require('ol.extent');
 goog.require('ol.layer.Layer');
 goog.require('ol.render.Event');
@@ -9,7 +9,6 @@ goog.require('ol.render.EventType');
 goog.require('ol.render.canvas');
 goog.require('ol.render.canvas.Immediate');
 goog.require('ol.renderer.Layer');
-goog.require('ol.vec.Mat4');


 /**
@@ -23,9 +22,9 @@ ol.renderer.canvas.Layer = function(layer) {

  /**
   * @private
-   * @type {!goog.vec.Mat4.Number}
+   * @type {ol.Matrix}
   */
-  this.transform_ = goog.vec.Mat4.createNumber();
+  this.transform_ = ol.matrix.create();

 };
 ol.inherits(ol.renderer.canvas.Layer, ol.renderer.Layer);
@@ -58,13 +57,13 @@ ol.renderer.canvas.Layer.prototype.composeFrame = function(frameState, layerStat
      var bottomRight = ol.extent.getBottomRight(extent);
      var bottomLeft = ol.extent.getBottomLeft(extent);

-      ol.vec.Mat4.multVec2(frameState.coordinateToPixelMatrix,
+      ol.matrix.multVec2(frameState.coordinateToPixelMatrix,
          topLeft, topLeft);
-      ol.vec.Mat4.multVec2(frameState.coordinateToPixelMatrix,
+      ol.matrix.multVec2(frameState.coordinateToPixelMatrix,
          topRight, topRight);
-      ol.vec.Mat4.multVec2(frameState.coordinateToPixelMatrix,
+      ol.matrix.multVec2(frameState.coordinateToPixelMatrix,
          bottomRight, bottomRight);
-      ol.vec.Mat4.multVec2(frameState.coordinateToPixelMatrix,
+      ol.matrix.multVec2(frameState.coordinateToPixelMatrix,
          bottomLeft, bottomLeft);

      context.save();
@@ -87,10 +86,10 @@ ol.renderer.canvas.Layer.prototype.composeFrame = function(frameState, layerStat

    // for performance reasons, context.setTransform is only used
    // when the view is rotated. see http://jsperf.com/canvas-transform
-    var dx = goog.vec.Mat4.getElement(imageTransform, 0, 3);
-    var dy = goog.vec.Mat4.getElement(imageTransform, 1, 3);
-    var dw = image.width * goog.vec.Mat4.getElement(imageTransform, 0, 0);
-    var dh = image.height * goog.vec.Mat4.getElement(imageTransform, 1, 1);
+    var dx = imageTransform[4];
+    var dy = imageTransform[5];
+    var dw = image.width * imageTransform[0];
+    var dh = image.height * imageTransform[3];
    context.drawImage(image, 0, 0, +image.width, +image.height,
        Math.round(dx), Math.round(dy), Math.round(dw), Math.round(dh));
    context.globalAlpha = alpha;
@@ -109,7 +108,7 @@ ol.renderer.canvas.Layer.prototype.composeFrame = function(frameState, layerStat
 * @param {ol.render.EventType} type Event type.
 * @param {CanvasRenderingContext2D} context Context.
 * @param {olx.FrameState} frameState Frame state.
- * @param {goog.vec.Mat4.Number=} opt_transform Transform.
+ * @param {ol.Matrix=} opt_transform Transform.
 * @private
 */
 ol.renderer.canvas.Layer.prototype.dispatchComposeEvent_ = function(type, context, frameState, opt_transform) {
@@ -135,7 +134,7 @@ ol.renderer.canvas.Layer.prototype.dispatchComposeEvent_ = function(type, contex
 /**
 * @param {CanvasRenderingContext2D} context Context.
 * @param {olx.FrameState} frameState Frame state.
- * @param {goog.vec.Mat4.Number=} opt_transform Transform.
+ * @param {ol.Matrix=} opt_transform Transform.
 * @protected
 */
 ol.renderer.canvas.Layer.prototype.dispatchPostComposeEvent = function(context, frameState, opt_transform) {
@@ -147,7 +146,7 @@ ol.renderer.canvas.Layer.prototype.dispatchPostComposeEvent = function(context,
 /**
 * @param {CanvasRenderingContext2D} context Context.
 * @param {olx.FrameState} frameState Frame state.
- * @param {goog.vec.Mat4.Number=} opt_transform Transform.
+ * @param {ol.Matrix=} opt_transform Transform.
 * @protected
 */
 ol.renderer.canvas.Layer.prototype.dispatchPreComposeEvent = function(context, frameState, opt_transform) {
@@ -159,7 +158,7 @@ ol.renderer.canvas.Layer.prototype.dispatchPreComposeEvent = function(context, f
 /**
 * @param {CanvasRenderingContext2D} context Context.
 * @param {olx.FrameState} frameState Frame state.
- * @param {goog.vec.Mat4.Number=} opt_transform Transform.
+ * @param {ol.Matrix=} opt_transform Transform.
 * @protected
 */
 ol.renderer.canvas.Layer.prototype.dispatchRenderEvent = function(context, frameState, opt_transform) {
@@ -175,7 +174,7 @@ ol.renderer.canvas.Layer.prototype.getImage = goog.abstractMethod;


 /**
- * @return {!goog.vec.Mat4.Number} Image transform.
+ * @return {!ol.Matrix} Image transform.
 */
 ol.renderer.canvas.Layer.prototype.getImageTransform = goog.abstractMethod;

@@ -184,12 +183,12 @@ ol.renderer.canvas.Layer.prototype.getImageTransform = goog.abstractMethod;
 * @param {olx.FrameState} frameState Frame state.
 * @param {number} offsetX Offset on the x-axis in view coordinates.
 * @protected
- * @return {!goog.vec.Mat4.Number} Transform.
+ * @return {!ol.Matrix} Transform.
 */
 ol.renderer.canvas.Layer.prototype.getTransform = function(frameState, offsetX) {
  var viewState = frameState.viewState;
  var pixelRatio = frameState.pixelRatio;
-  return ol.vec.Mat4.makeTransform2D(this.transform_,
+  return ol.matrix.makeTransform(this.transform_,
      pixelRatio * frameState.size[0] / 2,
      pixelRatio * frameState.size[1] / 2,
      pixelRatio / viewState.resolution,
@@ -210,13 +209,13 @@ ol.renderer.canvas.Layer.prototype.prepareFrame = goog.abstractMethod;

 /**
 * @param {ol.Pixel} pixelOnMap Pixel.
- * @param {goog.vec.Mat4.Number} imageTransformInv The transformation matrix
+ * @param {ol.Matrix} imageTransformInv The transformation matrix
 *        to convert from a map pixel to a canvas pixel.
 * @return {ol.Pixel} The pixel.
 * @protected
 */
 ol.renderer.canvas.Layer.prototype.getPixelOnCanvas = function(pixelOnMap, imageTransformInv) {
  var pixelOnCanvas = [0, 0];
-  ol.vec.Mat4.multVec2(imageTransformInv, pixelOnMap, pixelOnCanvas);
+  ol.matrix.multVec2(imageTransformInv, pixelOnMap, pixelOnCanvas);
  return pixelOnCanvas;
 };
--- a/src/ol/renderer/canvas/canvasmaprenderer.js
+++ b/src/ol/renderer/canvas/canvasmaprenderer.js
@@ -3,7 +3,7 @@
 goog.provide('ol.renderer.canvas.Map');

 goog.require('goog.asserts');
-goog.require('goog.vec.Mat4');
+goog.require('ol.matrix');
 goog.require('ol');
 goog.require('ol.RendererType');
 goog.require('ol.array');
@@ -25,7 +25,6 @@ goog.require('ol.renderer.canvas.TileLayer');
 goog.require('ol.renderer.canvas.VectorLayer');
 goog.require('ol.renderer.canvas.VectorTileLayer');
 goog.require('ol.source.State');
-goog.require('ol.vec.Mat4');


 /**
@@ -63,9 +62,9 @@ ol.renderer.canvas.Map = function(container, map) {

  /**
   * @private
-   * @type {!goog.vec.Mat4.Number}
+   * @type {ol.Matrix}
   */
-  this.transform_ = goog.vec.Mat4.createNumber();
+  this.transform_ = ol.matrix.create();

 };
 ol.inherits(ol.renderer.canvas.Map, ol.renderer.Map);
@@ -118,13 +117,13 @@ ol.renderer.canvas.Map.prototype.dispatchComposeEvent_ = function(type, frameSta
 /**
 * @param {olx.FrameState} frameState Frame state.
 * @protected
- * @return {!goog.vec.Mat4.Number} Transform.
+ * @return {!ol.Matrix} Transform.
 */
 ol.renderer.canvas.Map.prototype.getTransform = function(frameState) {
  var pixelRatio = frameState.pixelRatio;
  var viewState = frameState.viewState;
  var resolution = viewState.resolution;
-  return ol.vec.Mat4.makeTransform2D(this.transform_,
+  return ol.matrix.makeTransform(this.transform_,
      this.canvas_.width / 2, this.canvas_.height / 2,
      pixelRatio / resolution, -pixelRatio / resolution,
      -viewState.rotation,
--- a/src/ol/renderer/canvas/canvastilelayerrenderer.js
+++ b/src/ol/renderer/canvas/canvastilelayerrenderer.js
@@ -3,7 +3,7 @@
 goog.provide('ol.renderer.canvas.TileLayer');

 goog.require('goog.asserts');
-goog.require('goog.vec.Mat4');
+goog.require('ol.matrix');
 goog.require('ol.TileRange');
 goog.require('ol.TileState');
 goog.require('ol.array');
@@ -13,7 +13,6 @@ goog.require('ol.render.EventType');
 goog.require('ol.renderer.canvas.Layer');
 goog.require('ol.size');
 goog.require('ol.source.Tile');
-goog.require('ol.vec.Mat4');


 /**
@@ -51,9 +50,9 @@ ol.renderer.canvas.TileLayer = function(tileLayer) {

  /**
   * @private
-   * @type {!goog.vec.Mat4.Number}
+   * @type {ol.Matrix}
   */
-  this.imageTransform_ = goog.vec.Mat4.createNumber();
+  this.imageTransform_ = ol.matrix.create();

  /**
   * @protected
@@ -327,7 +326,7 @@ ol.renderer.canvas.TileLayer.prototype.renderTileImages = function(context, fram
  if (hasRenderListeners) {
    var dX = drawOffsetX - offsetX / drawScale + offsetX;
    var dY = drawOffsetY - offsetY / drawScale + offsetY;
-    var imageTransform = ol.vec.Mat4.makeTransform2D(this.imageTransform_,
+    var imageTransform = ol.matrix.makeTransform(this.imageTransform_,
        drawSize / 2 - dX, drawSize / 2 - dY, pixelScale, -pixelScale,
        -rotation, -center[0] + dX / pixelScale, -center[1] - dY / pixelScale);
    this.dispatchRenderEvent(renderContext, frameState, imageTransform);
--- a/src/ol/renderer/canvas/canvasvectortilelayerrenderer.js
+++ b/src/ol/renderer/canvas/canvasvectortilelayerrenderer.js
@@ -2,7 +2,7 @@ goog.provide('ol.renderer.canvas.VectorTileLayer');

 goog.require('goog.asserts');
 goog.require('ol.events');
-goog.require('goog.vec.Mat4');
+goog.require('ol.matrix');
 goog.require('ol.Feature');
 goog.require('ol.VectorTile');
 goog.require('ol.array');
@@ -17,7 +17,6 @@ goog.require('ol.renderer.canvas.TileLayer');
 goog.require('ol.renderer.vector');
 goog.require('ol.size');
 goog.require('ol.source.VectorTile');
-goog.require('ol.vec.Mat4');


 /**
@@ -57,9 +56,9 @@ ol.renderer.canvas.VectorTileLayer = function(layer) {

  /**
   * @private
-   * @type {!goog.vec.Mat4.Number}
+   * @type {ol.Matrix}
   */
-  this.tmpTransform_ = goog.vec.Mat4.createNumber();
+  this.tmpTransform_ = ol.matrix.create();

  // Use lower resolution for pure vector rendering. Closest resolution otherwise.
  this.zDirection =
@@ -148,7 +147,7 @@ ol.renderer.canvas.VectorTileLayer.prototype.renderTileReplays_ = function(

    if (pixelSpace) {
      origin = ol.extent.getTopLeft(tileExtent);
-      tileTransform = ol.vec.Mat4.makeTransform2D(this.tmpTransform_,
+      tileTransform = ol.matrix.makeTransform(this.tmpTransform_,
          offsetX, offsetY,
          pixelScale * tilePixelResolution,
          pixelScale * tilePixelResolution,
@@ -428,14 +427,14 @@ ol.renderer.canvas.VectorTileLayer.prototype.renderTileImage_ = function(
        tile.getTileCoord(), this.tmpExtent);
    var tileTransform;
    if (pixelSpace) {
-      tileTransform = ol.vec.Mat4.makeTransform2D(this.tmpTransform_,
+      tileTransform = ol.matrix.makeTransform(this.tmpTransform_,
          0, 0,
          pixelScale * tilePixelResolution, pixelScale * tilePixelResolution,
          0,
          -tileSize[0] * tilePixelRatio / 2, -tileSize[1] * tilePixelRatio / 2);
    } else {
      var tileCenter = ol.extent.getCenter(tileExtent);
-      tileTransform = ol.vec.Mat4.makeTransform2D(this.tmpTransform_,
+      tileTransform = ol.matrix.makeTransform(this.tmpTransform_,
          0, 0,
          pixelScale, -pixelScale,
          0,
--- a/src/ol/renderer/dom/domimagelayerrenderer.js
+++ b/src/ol/renderer/dom/domimagelayerrenderer.js
@@ -1,7 +1,7 @@
 goog.provide('ol.renderer.dom.ImageLayer');

 goog.require('goog.asserts');
-goog.require('goog.vec.Mat4');
+goog.require('ol.matrix');
 goog.require('ol.ImageBase');
 goog.require('ol.ViewHint');
 goog.require('ol.dom');
@@ -9,7 +9,6 @@ goog.require('ol.extent');
 goog.require('ol.layer.Image');
 goog.require('ol.proj');
 goog.require('ol.renderer.dom.Layer');
-goog.require('ol.vec.Mat4');


 /**
@@ -32,9 +31,9 @@ ol.renderer.dom.ImageLayer = function(imageLayer) {

  /**
   * @private
-   * @type {goog.vec.Mat4.Number}
+   * @type {ol.Matrix}
   */
-  this.transform_ = goog.vec.Mat4.createNumberIdentity();
+  this.transform_ = ol.matrix.create();

 };
 ol.inherits(ol.renderer.dom.ImageLayer, ol.renderer.dom.Layer);
@@ -118,8 +117,8 @@ ol.renderer.dom.ImageLayer.prototype.prepareFrame = function(frameState, layerSt
  if (image) {
    var imageExtent = image.getExtent();
    var imageResolution = image.getResolution();
-    var transform = goog.vec.Mat4.createNumber();
-    ol.vec.Mat4.makeTransform2D(transform,
+    var transform = ol.matrix.create();
+    ol.matrix.makeTransform(transform,
        frameState.size[0] / 2, frameState.size[1] / 2,
        imageResolution / viewResolution, imageResolution / viewResolution,
        viewRotation,
@@ -146,12 +145,12 @@ ol.renderer.dom.ImageLayer.prototype.prepareFrame = function(frameState, layerSt


 /**
- * @param {goog.vec.Mat4.Number} transform Transform.
+ * @param {ol.Matrix} transform Transform.
 * @private
 */
 ol.renderer.dom.ImageLayer.prototype.setTransform_ = function(transform) {
-  if (!ol.vec.Mat4.equals2D(transform, this.transform_)) {
+  if (!ol.matrix.equals(transform, this.transform_)) {
    ol.dom.transformElement2D(this.target, transform, 6);
-    goog.vec.Mat4.setFromArray(this.transform_, transform);
+    ol.matrix.setFromArray(this.transform_, transform);
  }
 };
--- a/src/ol/renderer/dom/dommaprenderer.js
+++ b/src/ol/renderer/dom/dommaprenderer.js
@@ -4,7 +4,7 @@ goog.require('goog.asserts');
 goog.require('ol.events');
 goog.require('ol.events.Event');
 goog.require('ol.events.EventType');
-goog.require('goog.vec.Mat4');
+goog.require('ol.matrix');
 goog.require('ol');
 goog.require('ol.RendererType');
 goog.require('ol.array');
@@ -23,7 +23,6 @@ goog.require('ol.renderer.dom.Layer');
 goog.require('ol.renderer.dom.TileLayer');
 goog.require('ol.renderer.dom.VectorLayer');
 goog.require('ol.source.State');
-goog.require('ol.vec.Mat4');


 /**
@@ -50,9 +49,9 @@ ol.renderer.dom.Map = function(container, map) {

  /**
   * @private
-   * @type {!goog.vec.Mat4.Number}
+   * @type {ol.Matrix}
   */
-  this.transform_ = goog.vec.Mat4.createNumber();
+  this.transform_ = ol.matrix.create();

  /**
   * @type {!Element}
@@ -124,7 +123,7 @@ ol.renderer.dom.Map.prototype.dispatchComposeEvent_ = function(type, frameState)
    var context = this.context_;
    var canvas = context.canvas;

-    ol.vec.Mat4.makeTransform2D(this.transform_,
+    ol.matrix.makeTransform(this.transform_,
        canvas.width / 2,
        canvas.height / 2,
        pixelRatio / viewState.resolution,
--- a/src/ol/renderer/dom/domtilelayerrenderer.js
+++ b/src/ol/renderer/dom/domtilelayerrenderer.js
@@ -4,7 +4,7 @@
 goog.provide('ol.renderer.dom.TileLayer');

 goog.require('goog.asserts');
-goog.require('goog.vec.Mat4');
+goog.require('ol.matrix');
 goog.require('ol');
 goog.require('ol.TileRange');
 goog.require('ol.TileState');
@@ -16,7 +16,6 @@ goog.require('ol.layer.Tile');
 goog.require('ol.renderer.dom.Layer');
 goog.require('ol.size');
 goog.require('ol.tilegrid.TileGrid');
-goog.require('ol.vec.Mat4');


 /**
@@ -200,7 +199,7 @@ ol.renderer.dom.TileLayer.prototype.prepareFrame = function(frameState, layerSta
  tileLayerZKeys.sort(ol.array.numberSafeCompareFunction);

  var i, ii, j, origin, resolution;
-  var transform = goog.vec.Mat4.createNumber();
+  var transform = ol.matrix.create();
  for (i = 0, ii = tileLayerZKeys.length; i < ii; ++i) {
    tileLayerZKey = tileLayerZKeys[i];
    tileLayerZ = this.tileLayerZs_[tileLayerZKey];
@@ -211,7 +210,7 @@ ol.renderer.dom.TileLayer.prototype.prepareFrame = function(frameState, layerSta
    }
    resolution = tileLayerZ.getResolution();
    origin = tileLayerZ.getOrigin();
-    ol.vec.Mat4.makeTransform2D(transform,
+    ol.matrix.makeTransform(transform,
        frameState.size[0] / 2, frameState.size[1] / 2,
        resolution / viewState.resolution,
        resolution / viewState.resolution,
@@ -314,9 +313,9 @@ ol.renderer.dom.TileLayerZ_ = function(tileGrid, tileCoordOrigin) {

  /**
   * @private
-   * @type {goog.vec.Mat4.Number}
+   * @type {ol.Matrix}
   */
-  this.transform_ = goog.vec.Mat4.createNumberIdentity();
+  this.transform_ = ol.matrix.create();

  /**
   * @private
@@ -437,11 +436,11 @@ ol.renderer.dom.TileLayerZ_.prototype.removeTilesOutsideExtent = function(extent


 /**
- * @param {goog.vec.Mat4.Number} transform Transform.
+ * @param {ol.Matrix} transform Transform.
 */
 ol.renderer.dom.TileLayerZ_.prototype.setTransform = function(transform) {
-  if (!ol.vec.Mat4.equals2D(transform, this.transform_)) {
+  if (!ol.matrix.equals(transform, this.transform_)) {
    ol.dom.transformElement2D(this.target, transform, 6);
-    goog.vec.Mat4.setFromArray(this.transform_, transform);
+    ol.matrix.setFromArray(this.transform_, transform);
  }
 };
--- a/src/ol/renderer/dom/domvectorlayerrenderer.js
+++ b/src/ol/renderer/dom/domvectorlayerrenderer.js
@@ -2,7 +2,7 @@ goog.provide('ol.renderer.dom.VectorLayer');

 goog.require('goog.asserts');
 goog.require('ol.events');
-goog.require('goog.vec.Mat4');
+goog.require('ol.matrix');
 goog.require('ol.ViewHint');
 goog.require('ol.dom');
 goog.require('ol.extent');
@@ -13,7 +13,6 @@ goog.require('ol.render.canvas.Immediate');
 goog.require('ol.render.canvas.ReplayGroup');
 goog.require('ol.renderer.dom.Layer');
 goog.require('ol.renderer.vector');
-goog.require('ol.vec.Mat4');


 /**
@@ -76,15 +75,15 @@ ol.renderer.dom.VectorLayer = function(vectorLayer) {

  /**
   * @private
-   * @type {goog.vec.Mat4.Number}
+   * @type {ol.Matrix}
   */
-  this.transform_ = goog.vec.Mat4.createNumber();
+  this.transform_ = ol.matrix.create();

  /**
   * @private
-   * @type {goog.vec.Mat4.Number}
+   * @type {ol.Matrix}
   */
-  this.elementTransform_ = goog.vec.Mat4.createNumber();
+  this.elementTransform_ = ol.matrix.create();

 };
 ol.inherits(ol.renderer.dom.VectorLayer, ol.renderer.dom.Layer);
@@ -120,7 +119,7 @@ ol.renderer.dom.VectorLayer.prototype.composeFrame = function(frameState, layerS
  var imageWidth = viewWidth * pixelRatio;
  var imageHeight = viewHeight * pixelRatio;

-  var transform = ol.vec.Mat4.makeTransform2D(this.transform_,
+  var transform = ol.matrix.makeTransform(this.transform_,
      pixelRatio * viewWidth / 2,
      pixelRatio * viewHeight / 2,
      pixelRatio / viewResolution,
@@ -134,7 +133,7 @@ ol.renderer.dom.VectorLayer.prototype.composeFrame = function(frameState, layerS
  context.canvas.width = imageWidth;
  context.canvas.height = imageHeight;

-  var elementTransform = ol.vec.Mat4.makeTransform2D(this.elementTransform_,
+  var elementTransform = ol.matrix.makeTransform(this.elementTransform_,
      0, 0,
      1 / pixelRatio, 1 / pixelRatio,
      0,
@@ -162,7 +161,7 @@ ol.renderer.dom.VectorLayer.prototype.composeFrame = function(frameState, layerS
 /**
 * @param {ol.render.EventType} type Event type.
 * @param {olx.FrameState} frameState Frame state.
- * @param {goog.vec.Mat4.Number} transform Transform.
+ * @param {ol.Matrix} transform Transform.
 * @private
 */
 ol.renderer.dom.VectorLayer.prototype.dispatchEvent_ = function(type, frameState, transform) {
--- a/src/ol/renderer/layerrenderer.js
+++ b/src/ol/renderer/layerrenderer.js
@@ -10,10 +10,9 @@ goog.require('ol.Observable');
 goog.require('ol.TileRange');
 goog.require('ol.TileState');
 goog.require('ol.layer.Layer');
-goog.require('ol.source.Source');
+goog.require('ol.matrix');
 goog.require('ol.source.State');
 goog.require('ol.source.Tile');
-goog.require('ol.vec.Mat4');


 /**
@@ -59,7 +58,7 @@ ol.renderer.Layer.prototype.forEachFeatureAtCoordinate = ol.nullFunction;
 */
 ol.renderer.Layer.prototype.forEachLayerAtPixel = function(pixel, frameState, callback, thisArg) {
  var coordinate = pixel.slice();
-  ol.vec.Mat4.multVec2(
+  ol.matrix.multVec2(
      frameState.pixelToCoordinateMatrix, coordinate, coordinate);

  var hasFeature = this.forEachFeatureAtCoordinate(
--- a/src/ol/renderer/maprenderer.js
+++ b/src/ol/renderer/maprenderer.js
@@ -2,7 +2,7 @@ goog.provide('ol.RendererType');
 goog.provide('ol.renderer.Map');

 goog.require('goog.asserts');
-goog.require('goog.vec.Mat4');
+goog.require('ol.matrix');
 goog.require('ol');
 goog.require('ol.Disposable');
 goog.require('ol.events');
@@ -12,7 +12,6 @@ goog.require('ol.functions');
 goog.require('ol.layer.Layer');
 goog.require('ol.renderer.Layer');
 goog.require('ol.style.IconImageCache');
-goog.require('ol.vec.Mat4');


 /**
@@ -69,12 +68,12 @@ ol.renderer.Map.prototype.calculateMatrices2D = function(frameState) {
  var coordinateToPixelMatrix = frameState.coordinateToPixelMatrix;
  goog.asserts.assert(coordinateToPixelMatrix,
      'frameState has a coordinateToPixelMatrix');
-  ol.vec.Mat4.makeTransform2D(coordinateToPixelMatrix,
+  ol.matrix.makeTransform(coordinateToPixelMatrix,
      frameState.size[0] / 2, frameState.size[1] / 2,
      1 / viewState.resolution, -1 / viewState.resolution,
      -viewState.rotation,
      -viewState.center[0], -viewState.center[1]);
-  var inverted = goog.vec.Mat4.invert(
+  var inverted = ol.matrix.invert(
      coordinateToPixelMatrix, frameState.pixelToCoordinateMatrix);
  goog.asserts.assert(inverted, 'matrix could be inverted');
 };
--- a/src/ol/renderer/webgl/webglimagelayerrenderer.js
+++ b/src/ol/renderer/webgl/webglimagelayerrenderer.js
@@ -1,7 +1,7 @@
 goog.provide('ol.renderer.webgl.ImageLayer');

 goog.require('goog.asserts');
-goog.require('goog.vec.Mat4');
+goog.require('ol.matrix');
 goog.require('goog.webgl');
 goog.require('ol.ImageBase');
 goog.require('ol.ViewHint');
@@ -12,7 +12,6 @@ goog.require('ol.layer.Image');
 goog.require('ol.proj');
 goog.require('ol.renderer.webgl.Layer');
 goog.require('ol.source.ImageVector');
-goog.require('ol.vec.Mat4');
 goog.require('ol.webgl.Context');


@@ -41,7 +40,7 @@ ol.renderer.webgl.ImageLayer = function(mapRenderer, imageLayer) {

  /**
   * @private
-   * @type {?goog.vec.Mat4.Number}
+   * @type {?ol.Matrix}
   */
  this.hitTransformationMatrix_ = null;

@@ -165,9 +164,9 @@ ol.renderer.webgl.ImageLayer.prototype.prepareFrame = function(frameState, layer

    // Translate and scale to flip the Y coord.
    var texCoordMatrix = this.texCoordMatrix;
-    goog.vec.Mat4.makeIdentity(texCoordMatrix);
-    goog.vec.Mat4.scale(texCoordMatrix, 1, -1, 1);
-    goog.vec.Mat4.translate(texCoordMatrix, 0, -1, 0);
+    ol.matrix.makeIdentity(texCoordMatrix);
+    ol.matrix.scale(texCoordMatrix, 1, -1);
+    ol.matrix.translate(texCoordMatrix, 0, -1);

    this.image_ = image;
    this.texture = texture;
@@ -197,20 +196,18 @@ ol.renderer.webgl.ImageLayer.prototype.updateProjectionMatrix_ = function(canvas
  var canvasExtentHeight = canvasHeight * viewResolution;

  var projectionMatrix = this.projectionMatrix;
-  goog.vec.Mat4.makeIdentity(projectionMatrix);
-  goog.vec.Mat4.scale(projectionMatrix,
+  ol.matrix.makeIdentity(projectionMatrix);
+  ol.matrix.scale(projectionMatrix,
      pixelRatio * 2 / canvasExtentWidth,
-      pixelRatio * 2 / canvasExtentHeight, 1);
-  goog.vec.Mat4.rotateZ(projectionMatrix, -viewRotation);
-  goog.vec.Mat4.translate(projectionMatrix,
+      pixelRatio * 2 / canvasExtentHeight);
+  ol.matrix.rotate(projectionMatrix, -viewRotation);
+  ol.matrix.translate(projectionMatrix,
      imageExtent[0] - viewCenter[0],
-      imageExtent[1] - viewCenter[1],
-      0);
-  goog.vec.Mat4.scale(projectionMatrix,
+      imageExtent[1] - viewCenter[1]);
+  ol.matrix.scale(projectionMatrix,
      (imageExtent[2] - imageExtent[0]) / 2,
-      (imageExtent[3] - imageExtent[1]) / 2,
-      1);
-  goog.vec.Mat4.translate(projectionMatrix, 1, 1, 0);
+      (imageExtent[3] - imageExtent[1]) / 2);
+  ol.matrix.translate(projectionMatrix, 1, 1);

 };

@@ -237,7 +234,7 @@ ol.renderer.webgl.ImageLayer.prototype.forEachLayerAtPixel = function(pixel, fra
    // for ImageVector sources use the original hit-detection logic,
    // so that for example also transparent polygons are detected
    var coordinate = pixel.slice();
-    ol.vec.Mat4.multVec2(
+    ol.matrix.multVec2(
        frameState.pixelToCoordinateMatrix, coordinate, coordinate);
    var hasFeature = this.forEachFeatureAtCoordinate(
        coordinate, frameState, ol.functions.TRUE, this);
@@ -257,7 +254,7 @@ ol.renderer.webgl.ImageLayer.prototype.forEachLayerAtPixel = function(pixel, fra
    }

    var pixelOnFrameBuffer = [0, 0];
-    ol.vec.Mat4.multVec2(
+    ol.matrix.multVec2(
        this.hitTransformationMatrix_, pixel, pixelOnFrameBuffer);

    if (pixelOnFrameBuffer[0] < 0 || pixelOnFrameBuffer[0] > imageSize[0] ||
@@ -289,36 +286,34 @@ ol.renderer.webgl.ImageLayer.prototype.forEachLayerAtPixel = function(pixel, fra
 * pixel on the map.
 * @param {ol.Size} mapSize The map size.
 * @param {ol.Size} imageSize The image size.
- * @return {goog.vec.Mat4.Number} The transformation matrix.
+ * @return {ol.Matrix} The transformation matrix.
 * @private
 */
 ol.renderer.webgl.ImageLayer.prototype.getHitTransformationMatrix_ = function(mapSize, imageSize) {
  // the first matrix takes a map pixel, flips the y-axis and scales to
  // a range between -1 ... 1
-  var mapCoordMatrix = goog.vec.Mat4.createNumber();
-  goog.vec.Mat4.makeIdentity(mapCoordMatrix);
-  goog.vec.Mat4.translate(mapCoordMatrix, -1, -1, 0);
-  goog.vec.Mat4.scale(mapCoordMatrix, 2 / mapSize[0], 2 / mapSize[1], 1);
-  goog.vec.Mat4.translate(mapCoordMatrix, 0, mapSize[1], 0);
-  goog.vec.Mat4.scale(mapCoordMatrix, 1, -1, 1);
+  var mapCoordMatrix = ol.matrix.create();
+  ol.matrix.translate(mapCoordMatrix, -1, -1);
+  ol.matrix.scale(mapCoordMatrix, 2 / mapSize[0], 2 / mapSize[1]);
+  ol.matrix.translate(mapCoordMatrix, 0, mapSize[1]);
+  ol.matrix.scale(mapCoordMatrix, 1, -1);

  // the second matrix is the inverse of the projection matrix used in the
  // shader for drawing
-  var projectionMatrixInv = goog.vec.Mat4.createNumber();
-  goog.vec.Mat4.invert(this.projectionMatrix, projectionMatrixInv);
+  var projectionMatrixInv = ol.matrix.create();
+  ol.matrix.invert(this.projectionMatrix, projectionMatrixInv);

  // the third matrix scales to the image dimensions and flips the y-axis again
-  var imageCoordMatrix = goog.vec.Mat4.createNumber();
-  goog.vec.Mat4.makeIdentity(imageCoordMatrix);
-  goog.vec.Mat4.translate(imageCoordMatrix, 0, imageSize[1], 0);
-  goog.vec.Mat4.scale(imageCoordMatrix, 1, -1, 1);
-  goog.vec.Mat4.scale(imageCoordMatrix, imageSize[0] / 2, imageSize[1] / 2, 1);
-  goog.vec.Mat4.translate(imageCoordMatrix, 1, 1, 0);
+  var imageCoordMatrix = ol.matrix.create();
+  ol.matrix.translate(imageCoordMatrix, 0, imageSize[1]);
+  ol.matrix.scale(imageCoordMatrix, 1, -1);
+  ol.matrix.scale(imageCoordMatrix, imageSize[0] / 2, imageSize[1] / 2);
+  ol.matrix.translate(imageCoordMatrix, 1, 1);

-  var transformMatrix = goog.vec.Mat4.createNumber();
-  goog.vec.Mat4.multMat(
+  var transformMatrix = ol.matrix.create();
+  ol.matrix.multiply(
      imageCoordMatrix, projectionMatrixInv, transformMatrix);
-  goog.vec.Mat4.multMat(
+  ol.matrix.multiply(
      transformMatrix, mapCoordMatrix, transformMatrix);

  return transformMatrix;
--- a/src/ol/renderer/webgl/webgllayerrenderer.js
+++ b/src/ol/renderer/webgl/webgllayerrenderer.js
@@ -1,8 +1,8 @@
 goog.provide('ol.renderer.webgl.Layer');

-goog.require('goog.vec.Mat4');
 goog.require('goog.webgl');
 goog.require('ol.layer.Layer');
+goog.require('ol.matrix');
 goog.require('ol.render.Event');
 goog.require('ol.render.EventType');
 goog.require('ol.render.webgl.Immediate');
@@ -11,6 +11,7 @@ goog.require('ol.renderer.webgl.map.shader.Default');
 goog.require('ol.renderer.webgl.map.shader.Default.Locations');
 goog.require('ol.renderer.webgl.map.shader.DefaultFragment');
 goog.require('ol.renderer.webgl.map.shader.DefaultVertex');
+goog.require('ol.vec.Mat4');
 goog.require('ol.webgl.Buffer');
 goog.require('ol.webgl.Context');

@@ -62,15 +63,15 @@ ol.renderer.webgl.Layer = function(mapRenderer, layer) {

  /**
   * @protected
-   * @type {!goog.vec.Mat4.Number}
+   * @type {ol.Matrix}
   */
-  this.texCoordMatrix = goog.vec.Mat4.createNumber();
+  this.texCoordMatrix = ol.matrix.create();

  /**
   * @protected
-   * @type {!goog.vec.Mat4.Number}
+   * @type {ol.Matrix}
   */
-  this.projectionMatrix = goog.vec.Mat4.createNumberIdentity();
+  this.projectionMatrix = ol.matrix.create();

  /**
   * @private
@@ -167,10 +168,10 @@ ol.renderer.webgl.Layer.prototype.composeFrame = function(frameState, layerState
    gl.uniform1i(locations.u_texture, 0);
  }

-  gl.uniformMatrix4fv(
-      locations.u_texCoordMatrix, false, this.getTexCoordMatrix());
+  gl.uniformMatrix4fv(locations.u_texCoordMatrix, false,
+      ol.vec.Mat4.fromMatrix(this.getTexCoordMatrix()));
  gl.uniformMatrix4fv(locations.u_projectionMatrix, false,
-      this.getProjectionMatrix());
+      ol.vec.Mat4.fromMatrix(this.getProjectionMatrix()));
  gl.uniform1f(locations.u_opacity, layerState.opacity);
  gl.bindTexture(goog.webgl.TEXTURE_2D, this.getTexture());
  gl.drawArrays(goog.webgl.TRIANGLE_STRIP, 0, 4);
@@ -208,7 +209,7 @@ ol.renderer.webgl.Layer.prototype.dispatchComposeEvent_ = function(type, context


 /**
- * @return {!goog.vec.Mat4.Number} Matrix.
+ * @return {!ol.Matrix} Matrix.
 */
 ol.renderer.webgl.Layer.prototype.getTexCoordMatrix = function() {
  return this.texCoordMatrix;
@@ -224,7 +225,7 @@ ol.renderer.webgl.Layer.prototype.getTexture = function() {


 /**
- * @return {!goog.vec.Mat4.Number} Matrix.
+ * @return {!ol.Matrix} Matrix.
 */
 ol.renderer.webgl.Layer.prototype.getProjectionMatrix = function() {
  return this.projectionMatrix;
--- a/src/ol/renderer/webgl/webgltilelayerrenderer.js
+++ b/src/ol/renderer/webgl/webgltilelayerrenderer.js
@@ -4,8 +4,7 @@
 goog.provide('ol.renderer.webgl.TileLayer');

 goog.require('goog.asserts');
-goog.require('goog.vec.Mat4');
-goog.require('goog.vec.Vec4');
+goog.require('ol.matrix');
 goog.require('goog.webgl');
 goog.require('ol.TileRange');
 goog.require('ol.TileState');
@@ -18,7 +17,6 @@ goog.require('ol.renderer.webgl.tilelayer.shader.Fragment');
 goog.require('ol.renderer.webgl.tilelayer.shader.Locations');
 goog.require('ol.renderer.webgl.tilelayer.shader.Vertex');
 goog.require('ol.size');
-goog.require('ol.vec.Mat4');
 goog.require('ol.webgl.Buffer');


@@ -294,22 +292,21 @@ ol.renderer.webgl.TileLayer.prototype.prepareFrame = function(frameState, layerS
    /** @type {Array.<number>} */
    var zs = Object.keys(tilesToDrawByZ).map(Number);
    zs.sort(ol.array.numberSafeCompareFunction);
-    var u_tileOffset = goog.vec.Vec4.createFloat32();
-    var i, ii, sx, sy, tileKey, tilesToDraw, tx, ty;
+    var u_tileOffset = new Float32Array(4);
+    var i, ii, tileKey, tilesToDraw;
    for (i = 0, ii = zs.length; i < ii; ++i) {
      tilesToDraw = tilesToDrawByZ[zs[i]];
      for (tileKey in tilesToDraw) {
        tile = tilesToDraw[tileKey];
        tileExtent = tileGrid.getTileCoordExtent(tile.tileCoord, tmpExtent);
-        sx = 2 * (tileExtent[2] - tileExtent[0]) /
+        u_tileOffset[0] = 2 * (tileExtent[2] - tileExtent[0]) /
            framebufferExtentDimension;
-        sy = 2 * (tileExtent[3] - tileExtent[1]) /
+        u_tileOffset[1] = 2 * (tileExtent[3] - tileExtent[1]) /
            framebufferExtentDimension;
-        tx = 2 * (tileExtent[0] - framebufferExtent[0]) /
+        u_tileOffset[2] = 2 * (tileExtent[0] - framebufferExtent[0]) /
            framebufferExtentDimension - 1;
-        ty = 2 * (tileExtent[1] - framebufferExtent[1]) /
+        u_tileOffset[3] = 2 * (tileExtent[1] - framebufferExtent[1]) /
            framebufferExtentDimension - 1;
-        goog.vec.Vec4.setFromValues(u_tileOffset, sx, sy, tx, ty);
        gl.uniform4fv(this.locations_.u_tileOffset, u_tileOffset);
        mapRenderer.bindTileTexture(tile, tilePixelSize,
            tileGutter * pixelRatio, goog.webgl.LINEAR, goog.webgl.LINEAR);
@@ -354,26 +351,21 @@ ol.renderer.webgl.TileLayer.prototype.prepareFrame = function(frameState, layerS
  this.updateLogos(frameState, tileSource);

  var texCoordMatrix = this.texCoordMatrix;
-  goog.vec.Mat4.makeIdentity(texCoordMatrix);
-  goog.vec.Mat4.translate(texCoordMatrix,
+  ol.matrix.makeIdentity(texCoordMatrix);
+  ol.matrix.translate(texCoordMatrix,
      (center[0] - framebufferExtent[0]) /
          (framebufferExtent[2] - framebufferExtent[0]),
      (center[1] - framebufferExtent[1]) /
-          (framebufferExtent[3] - framebufferExtent[1]),
-      0);
+          (framebufferExtent[3] - framebufferExtent[1]));
  if (viewState.rotation !== 0) {
-    goog.vec.Mat4.rotateZ(texCoordMatrix, viewState.rotation);
+    ol.matrix.rotate(texCoordMatrix, viewState.rotation);
  }
-  goog.vec.Mat4.scale(texCoordMatrix,
+  ol.matrix.scale(texCoordMatrix,
      frameState.size[0] * viewState.resolution /
          (framebufferExtent[2] - framebufferExtent[0]),
      frameState.size[1] * viewState.resolution /
-          (framebufferExtent[3] - framebufferExtent[1]),
-      1);
-  goog.vec.Mat4.translate(texCoordMatrix,
-      -0.5,
-      -0.5,
-      0);
+          (framebufferExtent[3] - framebufferExtent[1]));
+  ol.matrix.translate(texCoordMatrix, -0.5, -0.5);

  return true;
 };
@@ -392,7 +384,7 @@ ol.renderer.webgl.TileLayer.prototype.forEachLayerAtPixel = function(pixel, fram
    (frameState.size[1] - pixel[1]) / frameState.size[1]];

  var pixelOnFrameBufferScaled = [0, 0];
-  ol.vec.Mat4.multVec2(
+  ol.matrix.multVec2(
      this.texCoordMatrix, pixelOnMapScaled, pixelOnFrameBufferScaled);
  var pixelOnFrameBuffer = [
    pixelOnFrameBufferScaled[0] * this.framebufferDimension,
--- a/src/ol/renderer/webgl/webglvectorlayerrenderer.js
+++ b/src/ol/renderer/webgl/webglvectorlayerrenderer.js
@@ -5,10 +5,10 @@ goog.require('ol.events');
 goog.require('ol.ViewHint');
 goog.require('ol.extent');
 goog.require('ol.layer.Vector');
+goog.require('ol.matrix');
 goog.require('ol.render.webgl.ReplayGroup');
 goog.require('ol.renderer.vector');
 goog.require('ol.renderer.webgl.Layer');
-goog.require('ol.vec.Mat4');


 /**
@@ -155,7 +155,7 @@ ol.renderer.webgl.VectorLayer.prototype.hasFeatureAtCoordinate = function(coordi
 */
 ol.renderer.webgl.VectorLayer.prototype.forEachLayerAtPixel = function(pixel, frameState, callback, thisArg) {
  var coordinate = pixel.slice();
-  ol.vec.Mat4.multVec2(
+  ol.matrix.multVec2(
      frameState.pixelToCoordinateMatrix, coordinate, coordinate);
  var hasFeature = this.hasFeatureAtCoordinate(coordinate, frameState);