Refactor to a more convenient internal API

2016-06-22 23:41:00 +02:00
parent cf7ff841a7
commit 6b4ee42c90
34 changed files with 497 additions and 554 deletions
--- a/externs/olx.js
+++ b/externs/olx.js
@@ -7383,7 +7383,7 @@ olx.view.FitOptions.prototype.maxZoom;
 /**
 * @typedef {{animate: boolean,
 *     attributions: Object.<string, ol.Attribution>,
- *     coordinateToPixelMatrix: ol.Matrix,
+ *     coordinateToPixelTransform: ol.Transform,
 *     extent: (null|ol.Extent),
 *     focus: ol.Coordinate,
 *     index: number,
@@ -7391,7 +7391,7 @@ olx.view.FitOptions.prototype.maxZoom;
 *     layerStatesArray: Array.<ol.LayerState>,
 *     logos: Object.<string, (string|Element)>,
 *     pixelRatio: number,
- *     pixelToCoordinateMatrix: ol.Matrix,
+ *     pixelToCoordinateTransform: ol.Transform,
 *     postRenderFunctions: Array.<ol.PostRenderFunction>,
 *     size: ol.Size,
 *     skippedFeatureUids: Object.<string, boolean>,
--- a/src/ol/dom/dom.js
+++ b/src/ol/dom/dom.js
@@ -127,7 +127,7 @@ ol.dom.setTransform = function(element, value) {

 /**
 * @param {!Element} element Element.
- * @param {ol.Matrix} transform Matrix.
+ * @param {ol.Transform} transform Matrix.
 * @param {number=} opt_precision Precision.
 */
 ol.dom.transformElement2D = function(element, transform, opt_precision) {
--- a/src/ol/geom/flat/transformflatgeom.js
+++ b/src/ol/geom/flat/transformflatgeom.js
@@ -6,7 +6,7 @@ goog.provide('ol.geom.flat.transform');
 * @param {number} offset Offset.
 * @param {number} end End.
 * @param {number} stride Stride.
- * @param {ol.Matrix} transform Transform.
+ * @param {ol.Transform} transform Transform.
 * @param {Array.<number>=} opt_dest Destination.
 * @return {Array.<number>} Transformed coordinates.
 */
--- a/src/ol/geom/simplegeometry.js
+++ b/src/ol/geom/simplegeometry.js
@@ -294,7 +294,7 @@ ol.geom.SimpleGeometry.prototype.translate = function(deltaX, deltaY) {

 /**
 * @param {ol.geom.SimpleGeometry} simpleGeometry Simple geometry.
- * @param {ol.Matrix} transform Transform.
+ * @param {ol.Transform} transform Transform.
 * @param {Array.<number>=} opt_dest Destination.
 * @return {Array.<number>} Transformed flat coordinates.
 */
--- a/src/ol/map.js
+++ b/src/ol/map.js
@@ -33,7 +33,7 @@ goog.require('ol.has');
 goog.require('ol.interaction');
 goog.require('ol.layer.Base');
 goog.require('ol.layer.Group');
-goog.require('ol.matrix');
+goog.require('ol.transform');
 goog.require('ol.object');
 goog.require('ol.proj');
 goog.require('ol.proj.common');
@@ -202,15 +202,15 @@ ol.Map = function(options) {

  /**
   * @private
-   * @type {ol.Matrix}
+   * @type {ol.Transform}
   */
-  this.coordinateToPixelMatrix_ = ol.matrix.create();
+  this.coordinateToPixelTransform_ = ol.transform.create();

  /**
   * @private
-   * @type {ol.Matrix}
+   * @type {ol.Transform}
   */
-  this.pixelToCoordinateMatrix_ = ol.matrix.create();
+  this.pixelToCoordinateTransform_ = ol.transform.create();

  /**
   * @private
@@ -763,8 +763,7 @@ ol.Map.prototype.getCoordinateFromPixel = function(pixel) {
  if (!frameState) {
    return null;
  } else {
-    var vec2 = pixel.slice();
-    return ol.matrix.multVec2(frameState.pixelToCoordinateMatrix, vec2, vec2);
+    return ol.transform.apply(frameState.pixelToCoordinateTransform, pixel.slice());
  }
 };

@@ -852,8 +851,8 @@ ol.Map.prototype.getPixelFromCoordinate = function(coordinate) {
  if (!frameState) {
    return null;
  } else {
-    var vec2 = coordinate.slice(0, 2);
-    return ol.matrix.multVec2(frameState.coordinateToPixelMatrix, vec2, vec2);
+    return ol.transform.apply(frameState.coordinateToPixelTransform,
+        coordinate.slice(0, 2));
  }
 };

@@ -1297,7 +1296,7 @@ ol.Map.prototype.renderFrame_ = function(time) {
    frameState = /** @type {olx.FrameState} */ ({
      animate: false,
      attributions: {},
-      coordinateToPixelMatrix: this.coordinateToPixelMatrix_,
+      coordinateToPixelTransform: this.coordinateToPixelTransform_,
      extent: extent,
      focus: !this.focus_ ? viewState.center : this.focus_,
      index: this.frameIndex_++,
@@ -1305,7 +1304,7 @@ ol.Map.prototype.renderFrame_ = function(time) {
      layerStatesArray: layerStatesArray,
      logos: ol.object.assign({}, this.logos_),
      pixelRatio: this.pixelRatio_,
-      pixelToCoordinateMatrix: this.pixelToCoordinateMatrix_,
+      pixelToCoordinateTransform: this.pixelToCoordinateTransform_,
      postRenderFunctions: [],
      size: size,
      skippedFeatureUids: this.skippedFeatureUids_,
--- a/src/ol/matrix.js
+++ b/src/ol/matrix.js
@@ -1,247 +0,0 @@
-goog.provide('ol.matrix');
-
-/**
- * Collection of matrix transformation functions. The element order is
- * compatible with the [SVGMatrix interface](https://developer.mozilla.org/en-US/docs/Web/API/SVGMatrix):
- * ```
- * [ a c e ]
- * [ b d f ]
- * [ 0 0 1 ]
- * ```
- */
-
-
-/**
- * Create an identity matrix.
- * @return {!ol.Matrix} Identity matrix.
- */
-ol.matrix.create = function() {
-  return [1, 0, 0, 1, 0, 0];
-};
-
-
-/**
- * Check if two matrices are equal.
- * @param {!ol.Matrix} mat1 Matrix 1.
- * @param {!ol.Matrix} mat2 Matrix 2.
- * @return {boolean} Matrix 1 and Matrix 2 are equal.
- */
-ol.matrix.equals = function(mat1, mat2) {
-  return mat1[0] == mat2[0] &&
-      mat1[1] == mat2[1] &&
-      mat1[2] == mat2[2] &&
-      mat1[3] == mat2[3] &&
-      mat1[4] == mat2[4] &&
-      mat1[5] == mat2[5];
-};
-
-
-/**
- * Resets the given matrix to an identity matrix.
- * @param {!ol.Matrix} mat Matrix.
- * @return {!ol.Matrix} Matrix.
- */
-ol.matrix.makeIdentity = function(mat) {
-  return ol.matrix.setTransform(mat, 1, 0, 0, 1, 0, 0);
-};
-
-
-/**
- * Multiply two matrices with each other.
- * @param {!ol.Matrix} mat1 Matrix 1.
- * @param {!ol.Matrix} mat2 Matrix 2.
- * @param {ol.Matrix=} opt_mat Optional matrix for the result.
- * @return {!ol.Matrix} Result matrix.
- */
-ol.matrix.multiply = function(mat1, mat2, opt_mat) {
-  var mat = opt_mat ? opt_mat : ol.matrix.create();
-  ol.matrix.setTransform(mat, mat1[0], mat1[1], mat1[2], mat1[3], mat1[4], mat1[5]);
-  return ol.matrix.transform(mat, mat2[0], mat2[1], mat2[2], mat2[3], mat2[4], mat2[5]);
-};
-
-/**
- * Set the transform for a given matrix.
- * @param {!ol.Matrix} mat Matrix.
- * @param {number} a The a component of the matrix.
- * @param {number} b The b component of the matrix.
- * @param {number} c The c component of the matrix.
- * @param {number} d The d component of the matrix.
- * @param {number} e The e component of the matrix.
- * @param {number} f The f component of the matrix.
- * @return {!ol.Matrix} Matrix with transform applied.
- */
-ol.matrix.setTransform = function(mat, a, b, c, d, e, f) {
-  mat[0] = a;
-  mat[1] = b;
-  mat[2] = c;
-  mat[3] = d;
-  mat[4] = e;
-  mat[5] = f;
-  return mat;
-};
-
-
-/**
- * Set transform on one matrix from another matrix.
- * @param {!ol.Matrix} mat1 Matrix to set transform to.
- * @param {!ol.Matrix} mat2 Matrix to set transform from.
- * @return {!ol.Matrix} mat1 with transform from mat2 applied.
- */
-ol.matrix.setFromArray = function(mat1, mat2) {
-  mat1[0] = mat2[0];
-  mat1[1] = mat2[1];
-  mat1[2] = mat2[2];
-  mat1[3] = mat2[3];
-  mat1[4] = mat2[4];
-  mat1[5] = mat2[5];
-  return mat1;
-};
-
-
-/**
- * Rotates the given matrix.
- * @param {!ol.Matrix} mat Matrix.
- * @param {number} rotation Angle in radians.
- * @return {!ol.Matrix} Rotated matrix.
- */
-ol.matrix.rotate = function(mat, rotation) {
-  var cos = Math.cos(rotation);
-  var sin = Math.sin(rotation);
-  return ol.matrix.transform(mat, cos, sin, -sin, cos, 0, 0);
-};
-
-
-/**
- * Multiplies the given matrix with new matrix values.
- * @see {@link ol.Matrix#multiply}.
- *
- * @param {!ol.Matrix} mat Matrix.
- * @param {number} a The a component of the matrix.
- * @param {number} b The b component of the matrix.
- * @param {number} c The c component of the matrix.
- * @param {number} d The d component of the matrix.
- * @param {number} e The e component of the matrix.
- * @param {number} f The f component of the matrix.
- * @return {!ol.Matrix} Transformed matrix.
- */
-ol.matrix.transform = function(mat, a, b, c, d, e, f) {
-  var matA = mat[0];
-  var matB = mat[1];
-  var matC = mat[2];
-  var matD = mat[3];
-  var matE = mat[4];
-  var matF = mat[5];
-
-  mat[0] = matA * a + matC * b;
-  mat[1] = matB * a + matD * b;
-  mat[2] = matA * c + matC * d;
-  mat[3] = matB * c + matD * d;
-  mat[4] = matA * e + matC * f + matE;
-  mat[5] = matB * e + matD * f + matF;
-
-  return mat;
-};
-
-
-/**
- * @param {!ol.Matrix} mat Matrix.
- * @param {number} translateX1 Translate X1.
- * @param {number} translateY1 Translate Y1.
- * @param {number} scaleX Scale X.
- * @param {number} scaleY Scale Y.
- * @param {number} rotation Rotation.
- * @param {number} translateX2 Translate X2.
- * @param {number} translateY2 Translate Y2.
- * @return {!ol.Matrix} Matrix.
- */
-ol.matrix.makeTransform = function(mat, translateX1, translateY1,
-    scaleX, scaleY, rotation, translateX2, translateY2) {
-  ol.matrix.makeIdentity(mat);
-  if (translateX1 !== 0 || translateY1 !== 0) {
-    ol.matrix.translate(mat, translateX1, translateY1);
-  }
-  if (scaleX != 1 || scaleY != 1) {
-    ol.matrix.scale(mat, scaleX, scaleY);
-  }
-  if (rotation !== 0) {
-    ol.matrix.rotate(mat, rotation);
-  }
-  if (translateX2 !== 0 || translateY2 !== 0) {
-    ol.matrix.translate(mat, translateX2, translateY2);
-  }
-  return mat;
-};
-
-
-/**
- * Transforms the given vector with the given matrix storing the resulting,
- * transformed vector into resultVec.
- *
- * @param {ol.Matrix} mat The matrix supplying the transformation.
- * @param {Array.<number>} vec The 2 element vector to transform.
- * @param {Array.<number>} resultVec The 2 element vector to receive the results
- *     (may be vec).
- * @return {Array.<number>} return resultVec so that operations can be
- *     chained together.
- */
-ol.matrix.multVec2 = function(mat, vec, resultVec) {
-  var x = vec[0], y = vec[1];
-  resultVec[0] = mat[0] * x + mat[2] * y + mat[4];
-  resultVec[1] = mat[1] * x + mat[3] * y + mat[5];
-  return resultVec;
-};
-
-
-/**
- * Scales the given matrix.
- * @param {!ol.Matrix} mat Matrix.
- * @param {number} sx Scale factor x.
- * @param {number} sy Scale factor y.
- * @return {!ol.Matrix} The scaled matrix.
- */
-ol.matrix.scale = function(mat, sx, sy) {
-  return ol.matrix.transform(mat, sx, 0, 0, sy, 0, 0);
-};
-
-
-/**
- * Translate the given matrix.
- * @param {!ol.Matrix} mat Matrix.
- * @param {number} tx Translation x.
- * @param {number} ty Translation y.
- * @return {!ol.Matrix} The translated matrix.
- */
-ol.matrix.translate = function(mat, tx, ty) {
-  return ol.matrix.transform(mat, 1, 0, 0, 1, tx, ty);
-};
-
-
-/**
- * Invert the given matrix.
- * @param {!ol.Matrix} mat Matrix.
- * @param {ol.Matrix=} opt_mat Optional matrix for the result.
- * @return {!ol.Matrix} Inverse of the matrix.
- */
-ol.matrix.invert = function(mat, opt_mat) {
-  var result = opt_mat ? opt_mat : ol.matrix.create();
-  var det = ol.matrix.determinant(mat);
-  goog.asserts.assert(det !== 0, 'Matrix cannot be inverted.');
-
-  result[0] = mat[3] / det;
-  result[1] = -mat[1] / det;
-  result[2] = -mat[2] / det;
-  result[3] = mat[0] / det;
-  result[4] = (mat[2] * mat[5] - mat[3] * mat[4]) / det;
-  result[5] = -(mat[0] * mat[5] - mat[1] * mat[4]) / det;
-  return result;
-};
-
-
-/**
- * Returns the determinant of the given matrix.
- * @param {!ol.Matrix} mat Matrix.
- * @return {number} Determinant.
- */
-ol.matrix.determinant = function(mat) {
-  return mat[0] * mat[3] - mat[1] * mat[2];
-};
--- a/src/ol/render.js
+++ b/src/ol/render.js
@@ -1,6 +1,6 @@
 goog.provide('ol.render');

-goog.require('ol.matrix');
+goog.require('ol.transform');
 goog.require('ol.render.canvas.Immediate');


@@ -36,8 +36,7 @@ ol.render.toContext = function(context, opt_options) {
    canvas.style.height = size[1] + 'px';
  }
  var extent = [0, 0, canvas.width, canvas.height];
-  var transform = ol.matrix.makeTransform(ol.matrix.create(),
-      0, 0, pixelRatio, pixelRatio, 0, 0, 0);
+  var transform = ol.transform.scale(ol.transform.create(), pixelRatio, pixelRatio);
  return new ol.render.canvas.Immediate(context, pixelRatio, extent, transform,
      0);
 };
--- a/src/ol/render/canvas/canvasimmediate.js
+++ b/src/ol/render/canvas/canvasimmediate.js
@@ -5,7 +5,7 @@
 goog.provide('ol.render.canvas.Immediate');

 goog.require('goog.asserts');
-goog.require('ol.matrix');
+goog.require('ol.transform');
 goog.require('ol.array');
 goog.require('ol.color');
 goog.require('ol.colorlike');
@@ -31,7 +31,7 @@ goog.require('ol.render.canvas');
 * @param {CanvasRenderingContext2D} context Context.
 * @param {number} pixelRatio Pixel ratio.
 * @param {ol.Extent} extent Extent.
- * @param {ol.Matrix} transform Transform.
+ * @param {ol.Transform} transform Transform.
 * @param {number} viewRotation View rotation.
 * @struct
 */
@@ -58,7 +58,7 @@ ol.render.canvas.Immediate = function(context, pixelRatio, extent, transform, vi

  /**
   * @private
-   * @type {ol.Matrix}
+   * @type {ol.Transform}
   */
  this.transform_ = transform;

@@ -226,9 +226,9 @@ ol.render.canvas.Immediate = function(context, pixelRatio, extent, transform, vi

  /**
   * @private
-   * @type {ol.Matrix}
+   * @type {ol.Transform}
   */
-  this.tmpLocalTransform_ = ol.matrix.create();
+  this.tmpLocalTransform_ = ol.transform.create();

 };
 ol.inherits(ol.render.canvas.Immediate, ol.render.VectorContext);
@@ -272,9 +272,10 @@ ol.render.canvas.Immediate.prototype.drawImages_ = function(flatCoordinates, off
    if (rotation !== 0 || this.imageScale_ != 1) {
      var centerX = x + this.imageAnchorX_;
      var centerY = y + this.imageAnchorY_;
-      ol.matrix.makeTransform(localTransform,
-          centerX, centerY, this.imageScale_, this.imageScale_,
-          rotation, -centerX, -centerY);
+      ol.transform.translate(ol.transform.reset(localTransform), centerX, centerY);
+      ol.transform.scale(localTransform, this.imageScale_, this.imageScale_);
+      ol.transform.rotate(localTransform, rotation);
+      ol.transform.translate(localTransform, -centerX, -centerY);
      context.setTransform.apply(context, localTransform);
    }
    context.drawImage(this.image_, this.imageOriginX_, this.imageOriginY_,
@@ -319,8 +320,11 @@ ol.render.canvas.Immediate.prototype.drawText_ = function(flatCoordinates, offse
    var x = pixelCoordinates[offset] + this.textOffsetX_;
    var y = pixelCoordinates[offset + 1] + this.textOffsetY_;
    if (this.textRotation_ !== 0 || this.textScale_ != 1) {
-      var localTransform = ol.matrix.makeTransform(this.tmpLocalTransform_,
-          x, y, this.textScale_, this.textScale_, this.textRotation_, -x, -y);
+      var localTransform = ol.transform.reset(this.tmpLocalTransform_);
+      ol.transform.translate(localTransform, x, y);
+      ol.transform.scale(localTransform, this.textScale_, this.textScale_);
+      ol.transform.rotate(localTransform, this.textRotation_);
+      ol.transform.translate(localTransform, -x, -y);
      context.setTransform.apply(context, localTransform);
    }
    if (this.textStrokeState_) {
--- a/src/ol/render/canvas/canvasreplay.js
+++ b/src/ol/render/canvas/canvasreplay.js
@@ -9,7 +9,7 @@ goog.provide('ol.render.canvas.ReplayGroup');
 goog.provide('ol.render.canvas.TextReplay');

 goog.require('goog.asserts');
-goog.require('ol.matrix');
+goog.require('ol.transform');
 goog.require('ol');
 goog.require('ol.array');
 goog.require('ol.color');
@@ -116,9 +116,9 @@ ol.render.canvas.Replay = function(tolerance, maxExtent, resolution) {

  /**
   * @private
-   * @type {ol.Matrix}
+   * @type {ol.Transform}
   */
-  this.renderedTransform_ = ol.matrix.create();
+  this.renderedTransform_ = ol.transform.create();

  /**
   * @protected
@@ -134,15 +134,15 @@ ol.render.canvas.Replay = function(tolerance, maxExtent, resolution) {

  /**
   * @private
-   * @type {ol.Matrix}
+   * @type {ol.Transform}
   */
-  this.tmpLocalTransform_ = ol.matrix.create();
+  this.tmpLocalTransform_ = ol.transform.create();

  /**
   * @private
-   * @type {ol.Matrix}
+   * @type {ol.Transform}
   */
-  this.tmpLocalTransformInv_ = ol.matrix.create();
+  this.tmpLocalTransformInv_ = ol.transform.create();
 };
 ol.inherits(ol.render.canvas.Replay, ol.render.VectorContext);

@@ -222,7 +222,7 @@ ol.render.canvas.Replay.prototype.beginGeometry = function(geometry, feature) {
 * @private
 * @param {CanvasRenderingContext2D} context Context.
 * @param {number} pixelRatio Pixel ratio.
- * @param {ol.Matrix} transform Transform.
+ * @param {ol.Transform} transform Transform.
 * @param {number} viewRotation View rotation.
 * @param {Object.<string, boolean>} skippedFeaturesHash Ids of features
 *     to skip.
@@ -239,13 +239,13 @@ ol.render.canvas.Replay.prototype.replay_ = function(
    instructions, featureCallback, opt_hitExtent) {
  /** @type {Array.<number>} */
  var pixelCoordinates;
-  if (ol.matrix.equals(transform, this.renderedTransform_)) {
+  if (ol.array.equals(transform, this.renderedTransform_)) {
    pixelCoordinates = this.pixelCoordinates_;
  } else {
    pixelCoordinates = ol.geom.flat.transform.transform2D(
        this.coordinates, 0, this.coordinates.length, 2,
        transform, this.pixelCoordinates_);
-    ol.matrix.setFromArray(this.renderedTransform_, transform);
+    ol.transform.setFromArray(this.renderedTransform_, transform);
    goog.asserts.assert(pixelCoordinates === this.pixelCoordinates_,
        'pixelCoordinates should be the same as this.pixelCoordinates_');
  }
@@ -331,9 +331,10 @@ ol.render.canvas.Replay.prototype.replay_ = function(
          if (scale != 1 || rotation !== 0) {
            var centerX = x + anchorX;
            var centerY = y + anchorY;
-            ol.matrix.makeTransform(
-                localTransform, centerX, centerY, scale, scale,
-                rotation, -centerX, -centerY);
+            ol.transform.translate(ol.transform.reset(localTransform), centerX, centerY);
+            ol.transform.scale(localTransform, scale, scale);
+            ol.transform.rotate(localTransform, rotation);
+            ol.transform.translate(localTransform, -centerX, -centerY);
            context.transform.apply(context, localTransform);
          }
          var alpha = context.globalAlpha;
@@ -351,7 +352,7 @@ ol.render.canvas.Replay.prototype.replay_ = function(
            context.globalAlpha = alpha;
          }
          if (scale != 1 || rotation !== 0) {
-            ol.matrix.invert(localTransform, localTransformInv);
+            ol.transform.invert(ol.transform.setFromArray(localTransformInv, localTransform));
            context.transform.apply(context, localTransformInv);
          }
        }
@@ -389,8 +390,10 @@ ol.render.canvas.Replay.prototype.replay_ = function(
          x = pixelCoordinates[d] + offsetX;
          y = pixelCoordinates[d + 1] + offsetY;
          if (scale != 1 || rotation !== 0) {
-            ol.matrix.makeTransform(
-                localTransform, x, y, scale, scale, rotation, -x, -y);
+            ol.transform.translate(ol.transform.reset(localTransform), x, y);
+            ol.transform.scale(localTransform, scale, scale);
+            ol.transform.rotate(localTransform, rotation);
+            ol.transform.translate(localTransform, -x, -y);
            context.transform.apply(context, localTransform);
          }

@@ -422,7 +425,7 @@ ol.render.canvas.Replay.prototype.replay_ = function(
          }

          if (scale != 1 || rotation !== 0) {
-            ol.matrix.invert(localTransform, localTransformInv);
+            ol.transform.invert(ol.transform.setFromArray(localTransformInv, localTransform));
            context.transform.apply(context, localTransformInv);
          }
        }
@@ -540,7 +543,7 @@ ol.render.canvas.Replay.prototype.replay_ = function(
 /**
 * @param {CanvasRenderingContext2D} context Context.
 * @param {number} pixelRatio Pixel ratio.
- * @param {ol.Matrix} transform Transform.
+ * @param {ol.Transform} transform Transform.
 * @param {number} viewRotation View rotation.
 * @param {Object.<string, boolean>} skippedFeaturesHash Ids of features
 *     to skip.
@@ -555,7 +558,7 @@ ol.render.canvas.Replay.prototype.replay = function(

 /**
 * @param {CanvasRenderingContext2D} context Context.
- * @param {ol.Matrix} transform Transform.
+ * @param {ol.Transform} transform Transform.
 * @param {number} viewRotation View rotation.
 * @param {Object.<string, boolean>} skippedFeaturesHash Ids of features
 *     to skip.
@@ -1858,9 +1861,9 @@ ol.render.canvas.ReplayGroup = function(

  /**
   * @private
-   * @type {ol.Matrix}
+   * @type {ol.Transform}
   */
-  this.hitDetectionTransform_ = ol.matrix.create();
+  this.hitDetectionTransform_ = ol.transform.create();

 };

@@ -1894,10 +1897,11 @@ ol.render.canvas.ReplayGroup.prototype.finish = function() {
 ol.render.canvas.ReplayGroup.prototype.forEachFeatureAtCoordinate = function(
    coordinate, resolution, rotation, skippedFeaturesHash, callback) {

-  var transform = this.hitDetectionTransform_;
-  ol.matrix.makeTransform(transform, 0.5, 0.5,
-      1 / resolution, -1 / resolution, -rotation,
-      -coordinate[0], -coordinate[1]);
+  var transform = ol.transform.reset(this.hitDetectionTransform_);
+  ol.transform.translate(transform, 0.5, 0.5);
+  ol.transform.scale(transform, 1 / resolution, -1 / resolution);
+  ol.transform.rotate(transform, -rotation);
+  ol.transform.translate(transform, -coordinate[0], -coordinate[1]);

  var context = this.hitDetectionContext_;
  context.clearRect(0, 0, 1, 1);
@@ -1966,7 +1970,7 @@ ol.render.canvas.ReplayGroup.prototype.isEmpty = function() {
 /**
 * @param {CanvasRenderingContext2D} context Context.
 * @param {number} pixelRatio Pixel ratio.
- * @param {ol.Matrix} transform Transform.
+ * @param {ol.Transform} transform Transform.
 * @param {number} viewRotation View rotation.
 * @param {Object.<string, boolean>} skippedFeaturesHash Ids of features
 *     to skip.
@@ -2019,7 +2023,7 @@ ol.render.canvas.ReplayGroup.prototype.replay = function(context, pixelRatio,
 /**
 * @private
 * @param {CanvasRenderingContext2D} context Context.
- * @param {ol.Matrix} transform Transform.
+ * @param {ol.Transform} transform Transform.
 * @param {number} viewRotation View rotation.
 * @param {Object.<string, boolean>} skippedFeaturesHash Ids of features
 *     to skip.
--- a/src/ol/render/webgl/webglreplay.js
+++ b/src/ol/render/webgl/webglreplay.js
@@ -2,7 +2,7 @@ goog.provide('ol.render.webgl.ImageReplay');
 goog.provide('ol.render.webgl.ReplayGroup');

 goog.require('goog.asserts');
-goog.require('ol.matrix');
+goog.require('ol.transform');
 goog.require('ol.extent');
 goog.require('ol.object');
 goog.require('ol.render.IReplayGroup');
@@ -116,16 +116,16 @@ ol.render.webgl.ImageReplay = function(tolerance, maxExtent) {
  this.opacity_ = undefined;

  /**
-   * @type {ol.Matrix}
+   * @type {ol.Transform}
   * @private
   */
-  this.offsetRotateMatrix_ = ol.matrix.create();
+  this.offsetRotateMatrix_ = ol.transform.create();

  /**
-   * @type {ol.Matrix}
+   * @type {ol.Transform}
   * @private
   */
-  this.offsetScaleMatrix_ = ol.matrix.create();
+  this.offsetScaleMatrix_ = ol.transform.create();

  /**
   * @type {number|undefined}
@@ -140,10 +140,10 @@ ol.render.webgl.ImageReplay = function(tolerance, maxExtent) {
  this.originY_ = undefined;

  /**
-   * @type {ol.Matrix}
+   * @type {ol.Transform}
   * @private
   */
-  this.projectionMatrix_ = ol.matrix.create();
+  this.projectionMatrix_ = ol.transform.create();

  /**
   * @private
@@ -552,22 +552,17 @@ ol.render.webgl.ImageReplay.prototype.replay = function(context,
      false, 32, 28);

  // set the "uniform" values
-  var projectionMatrix = this.projectionMatrix_;
-  ol.matrix.makeTransform(projectionMatrix,
-      0.0, 0.0,
-      2 / (resolution * size[0]),
-      2 / (resolution * size[1]),
-      -rotation,
-      -(center[0] - this.origin_[0]), -(center[1] - this.origin_[1]));
+  var projectionMatrix = ol.transform.reset(this.projectionMatrix_);
+  ol.transform.scale(projectionMatrix, 2 / (resolution * size[0]), 2 / (resolution * size[1]));
+  ol.transform.rotate(projectionMatrix, -rotation);
+  ol.transform.translate(projectionMatrix, -(center[0] - this.origin_[0]), -(center[1] - this.origin_[1]));

-  var offsetScaleMatrix = this.offsetScaleMatrix_;
-  ol.matrix.makeIdentity(offsetScaleMatrix);
-  ol.matrix.scale(offsetScaleMatrix, 2 / size[0], 2 / size[1]);
+  var offsetScaleMatrix = ol.transform.reset(this.offsetScaleMatrix_);
+  ol.transform.scale(offsetScaleMatrix, 2 / size[0], 2 / size[1]);

-  var offsetRotateMatrix = this.offsetRotateMatrix_;
-  ol.matrix.makeIdentity(offsetRotateMatrix);
+  var offsetRotateMatrix = ol.transform.reset(this.offsetRotateMatrix_);
  if (rotation !== 0) {
-    ol.matrix.rotate(offsetRotateMatrix, -rotation);
+    ol.transform.rotate(offsetRotateMatrix, -rotation);
  }

  gl.uniformMatrix4fv(locations.u_projectionMatrix, false, ol.vec.Mat4.fromMatrix(projectionMatrix));
--- 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('ol.matrix');
+goog.require('ol.transform');
 goog.require('ol.functions');
 goog.require('ol.ImageBase');
 goog.require('ol.ViewHint');
@@ -30,13 +30,13 @@ ol.renderer.canvas.ImageLayer = function(imageLayer) {

  /**
   * @private
-   * @type {ol.Matrix}
+   * @type {ol.Transform}
   */
-  this.imageTransform_ = ol.matrix.create();
+  this.imageTransform_ = ol.transform.create();

  /**
   * @private
-   * @type {?ol.Matrix}
+   * @type {?ol.Transform}
   */
  this.imageTransformInv_ = null;

@@ -82,9 +82,8 @@ ol.renderer.canvas.ImageLayer.prototype.forEachLayerAtPixel = function(pixel, fr
  if (this.getLayer().getSource() instanceof ol.source.ImageVector) {
    // for ImageVector sources use the original hit-detection logic,
    // so that for example also transparent polygons are detected
-    var coordinate = pixel.slice();
-    ol.matrix.multVec2(
-        frameState.pixelToCoordinateMatrix, coordinate, coordinate);
+    var coordinate = ol.transform.apply(
+        frameState.pixelToCoordinateTransform, pixel.slice());
    var hasFeature = this.forEachFeatureAtCoordinate(
        coordinate, frameState, ol.functions.TRUE, this);

@@ -96,8 +95,7 @@ ol.renderer.canvas.ImageLayer.prototype.forEachLayerAtPixel = function(pixel, fr
  } else {
    // for all other image sources directly check the image
    if (!this.imageTransformInv_) {
-      this.imageTransformInv_ = ol.matrix.create();
-      ol.matrix.invert(this.imageTransform_, this.imageTransformInv_);
+      this.imageTransformInv_ = ol.transform.invert(this.imageTransform_.slice());
    }

    var pixelOnCanvas =
@@ -189,11 +187,12 @@ ol.renderer.canvas.ImageLayer.prototype.prepareFrame = function(frameState, laye
    var imagePixelRatio = image.getPixelRatio();
    var scale = pixelRatio * imageResolution /
        (viewResolution * imagePixelRatio);
-    ol.matrix.makeTransform(this.imageTransform_,
+    var transform = ol.transform.reset(this.imageTransform_);
+    ol.transform.translate(transform,
        pixelRatio * frameState.size[0] / 2,
-        pixelRatio * frameState.size[1] / 2,
-        scale, scale,
-        0,
+        pixelRatio * frameState.size[1] / 2);
+    ol.transform.scale(transform, scale, scale);
+    ol.transform.translate(transform,
        imagePixelRatio * (imageExtent[0] - viewCenter[0]) / imageResolution,
        imagePixelRatio * (viewCenter[1] - imageExtent[3]) / imageResolution);
    this.imageTransformInv_ = null;
--- 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('ol.matrix');
+goog.require('ol.transform');
 goog.require('ol.extent');
 goog.require('ol.layer.Layer');
 goog.require('ol.render.Event');
@@ -22,9 +22,9 @@ ol.renderer.canvas.Layer = function(layer) {

  /**
   * @private
-   * @type {ol.Matrix}
+   * @type {ol.Transform}
   */
-  this.transform_ = ol.matrix.create();
+  this.transform_ = ol.transform.create();

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

-      ol.matrix.multVec2(frameState.coordinateToPixelMatrix,
-          topLeft, topLeft);
-      ol.matrix.multVec2(frameState.coordinateToPixelMatrix,
-          topRight, topRight);
-      ol.matrix.multVec2(frameState.coordinateToPixelMatrix,
-          bottomRight, bottomRight);
-      ol.matrix.multVec2(frameState.coordinateToPixelMatrix,
-          bottomLeft, bottomLeft);
+      ol.transform.apply(frameState.coordinateToPixelTransform, topLeft);
+      ol.transform.apply(frameState.coordinateToPixelTransform, topRight);
+      ol.transform.apply(frameState.coordinateToPixelTransform, bottomRight);
+      ol.transform.apply(frameState.coordinateToPixelTransform, bottomLeft);

      context.save();
      ol.render.canvas.rotateAtOffset(context, -rotation, width / 2, height / 2);
@@ -108,7 +104,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 {ol.Matrix=} opt_transform Transform.
+ * @param {ol.Transform=} opt_transform Transform.
 * @private
 */
 ol.renderer.canvas.Layer.prototype.dispatchComposeEvent_ = function(type, context, frameState, opt_transform) {
@@ -134,7 +130,7 @@ ol.renderer.canvas.Layer.prototype.dispatchComposeEvent_ = function(type, contex
 /**
 * @param {CanvasRenderingContext2D} context Context.
 * @param {olx.FrameState} frameState Frame state.
- * @param {ol.Matrix=} opt_transform Transform.
+ * @param {ol.Transform=} opt_transform Transform.
 * @protected
 */
 ol.renderer.canvas.Layer.prototype.dispatchPostComposeEvent = function(context, frameState, opt_transform) {
@@ -146,7 +142,7 @@ ol.renderer.canvas.Layer.prototype.dispatchPostComposeEvent = function(context,
 /**
 * @param {CanvasRenderingContext2D} context Context.
 * @param {olx.FrameState} frameState Frame state.
- * @param {ol.Matrix=} opt_transform Transform.
+ * @param {ol.Transform=} opt_transform Transform.
 * @protected
 */
 ol.renderer.canvas.Layer.prototype.dispatchPreComposeEvent = function(context, frameState, opt_transform) {
@@ -158,7 +154,7 @@ ol.renderer.canvas.Layer.prototype.dispatchPreComposeEvent = function(context, f
 /**
 * @param {CanvasRenderingContext2D} context Context.
 * @param {olx.FrameState} frameState Frame state.
- * @param {ol.Matrix=} opt_transform Transform.
+ * @param {ol.Transform=} opt_transform Transform.
 * @protected
 */
 ol.renderer.canvas.Layer.prototype.dispatchRenderEvent = function(context, frameState, opt_transform) {
@@ -174,7 +170,7 @@ ol.renderer.canvas.Layer.prototype.getImage = goog.abstractMethod;


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

@@ -183,19 +179,19 @@ 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 {!ol.Matrix} Transform.
+ * @return {!ol.Transform} Transform.
 */
 ol.renderer.canvas.Layer.prototype.getTransform = function(frameState, offsetX) {
  var viewState = frameState.viewState;
  var pixelRatio = frameState.pixelRatio;
-  return ol.matrix.makeTransform(this.transform_,
-      pixelRatio * frameState.size[0] / 2,
-      pixelRatio * frameState.size[1] / 2,
-      pixelRatio / viewState.resolution,
-      -pixelRatio / viewState.resolution,
-      -viewState.rotation,
-      -viewState.center[0] + offsetX,
-      -viewState.center[1]);
+  var transform = ol.transform.reset(this.transform_);
+  ol.transform.translate(transform,
+      pixelRatio * frameState.size[0] / 2, pixelRatio * frameState.size[1] / 2);
+  ol.transform.scale(transform,
+      pixelRatio / viewState.resolution, -pixelRatio / viewState.resolution);
+  ol.transform.rotate(transform, -viewState.rotation);
+  return ol.transform.translate(transform,
+      -viewState.center[0] + offsetX, -viewState.center[1]);
 };


@@ -209,13 +205,11 @@ ol.renderer.canvas.Layer.prototype.prepareFrame = goog.abstractMethod;

 /**
 * @param {ol.Pixel} pixelOnMap Pixel.
- * @param {ol.Matrix} imageTransformInv The transformation matrix
+ * @param {ol.Transform} 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.matrix.multVec2(imageTransformInv, pixelOnMap, pixelOnCanvas);
-  return pixelOnCanvas;
+  return ol.transform.apply(imageTransformInv, pixelOnMap.slice());
 };
--- 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('ol.matrix');
+goog.require('ol.transform');
 goog.require('ol');
 goog.require('ol.RendererType');
 goog.require('ol.array');
@@ -62,9 +62,9 @@ ol.renderer.canvas.Map = function(container, map) {

  /**
   * @private
-   * @type {ol.Matrix}
+   * @type {ol.Transform}
   */
-  this.transform_ = ol.matrix.create();
+  this.transform_ = ol.transform.create();

 };
 ol.inherits(ol.renderer.canvas.Map, ol.renderer.Map);
@@ -117,16 +117,19 @@ ol.renderer.canvas.Map.prototype.dispatchComposeEvent_ = function(type, frameSta
 /**
 * @param {olx.FrameState} frameState Frame state.
 * @protected
- * @return {!ol.Matrix} Transform.
+ * @return {!ol.Transform} Transform.
 */
 ol.renderer.canvas.Map.prototype.getTransform = function(frameState) {
  var pixelRatio = frameState.pixelRatio;
  var viewState = frameState.viewState;
  var resolution = viewState.resolution;
-  return ol.matrix.makeTransform(this.transform_,
-      this.canvas_.width / 2, this.canvas_.height / 2,
-      pixelRatio / resolution, -pixelRatio / resolution,
-      -viewState.rotation,
+  var transform = ol.transform.reset(this.transform_);
+  ol.transform.translate(transform,
+      this.canvas_.width / 2, this.canvas_.height / 2);
+  ol.transform.scale(transform,
+      pixelRatio / resolution, -pixelRatio / resolution);
+  ol.transform.rotate(transform, -viewState.rotation);
+  return ol.transform.translate(transform,
      -viewState.center[0], -viewState.center[1]);
 };

--- 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('ol.matrix');
+goog.require('ol.transform');
 goog.require('ol.TileRange');
 goog.require('ol.TileState');
 goog.require('ol.array');
@@ -50,9 +50,9 @@ ol.renderer.canvas.TileLayer = function(tileLayer) {

  /**
   * @private
-   * @type {ol.Matrix}
+   * @type {ol.Transform}
   */
-  this.imageTransform_ = ol.matrix.create();
+  this.imageTransform_ = ol.transform.create();

  /**
   * @protected
@@ -326,9 +326,11 @@ 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.matrix.makeTransform(this.imageTransform_,
-        drawSize / 2 - dX, drawSize / 2 - dY, pixelScale, -pixelScale,
-        -rotation, -center[0] + dX / pixelScale, -center[1] - dY / pixelScale);
+    var imageTransform = ol.transform.reset(this.imageTransform_);
+    ol.transform.translate(imageTransform, drawSize / 2 - dX, drawSize / 2 - dY);
+    ol.transform.scale(imageTransform, pixelScale, -pixelScale);
+    ol.transform.rotate(imageTransform, -rotation);
+    ol.transform.translate(imageTransform, -center[0] + dX / pixelScale, -center[1] - dY / pixelScale);
    this.dispatchRenderEvent(renderContext, frameState, imageTransform);
  }
  if (rotation || hasRenderListeners) {
--- 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('ol.matrix');
+goog.require('ol.transform');
 goog.require('ol.Feature');
 goog.require('ol.VectorTile');
 goog.require('ol.array');
@@ -56,9 +56,9 @@ ol.renderer.canvas.VectorTileLayer = function(layer) {

  /**
   * @private
-   * @type {ol.Matrix}
+   * @type {ol.Transform}
   */
-  this.tmpTransform_ = ol.matrix.create();
+  this.tmpTransform_ = ol.transform.create();

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

    if (pixelSpace) {
      origin = ol.extent.getTopLeft(tileExtent);
-      tileTransform = ol.matrix.makeTransform(this.tmpTransform_,
-          offsetX, offsetY,
-          pixelScale * tilePixelResolution,
-          pixelScale * tilePixelResolution,
-          rotation,
+      tileTransform = ol.transform.reset(this.tmpTransform_);
+      ol.transform.translate(tileTransform, offsetX, offsetY);
+      ol.transform.scale(tileTransform,
+          pixelScale * tilePixelResolution, pixelScale * tilePixelResolution);
+      ol.transform.rotate(tileTransform, rotation);
+      ol.transform.translate(tileTransform,
          (origin[0] - center[0]) / tilePixelResolution,
          (center[1] - origin[1]) / tilePixelResolution);
    } else {
@@ -425,20 +426,16 @@ ol.renderer.canvas.VectorTileLayer.prototype.renderTileImage_ = function(
    var tilePixelResolution = tileResolution / tilePixelRatio;
    var tileExtent = tileGrid.getTileCoordExtent(
        tile.getTileCoord(), this.tmpExtent);
-    var tileTransform;
+    var tileTransform = ol.transform.reset(this.tmpTransform_);
    if (pixelSpace) {
-      tileTransform = ol.matrix.makeTransform(this.tmpTransform_,
-          0, 0,
-          pixelScale * tilePixelResolution, pixelScale * tilePixelResolution,
-          0,
+      ol.transform.scale(tileTransform,
+          pixelScale * tilePixelResolution, pixelScale * tilePixelResolution);
+      ol.transform.translate(tileTransform,
          -tileSize[0] * tilePixelRatio / 2, -tileSize[1] * tilePixelRatio / 2);
    } else {
      var tileCenter = ol.extent.getCenter(tileExtent);
-      tileTransform = ol.matrix.makeTransform(this.tmpTransform_,
-          0, 0,
-          pixelScale, -pixelScale,
-          0,
-          -tileCenter[0], -tileCenter[1]);
+      ol.transform.scale(tileTransform, pixelScale, -pixelScale);
+      ol.transform.translate(tileTransform, -tileCenter[0], -tileCenter[1]);
    }

    replayState.replayGroup.replay(tileContext, pixelRatio,
--- 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('ol.matrix');
+goog.require('ol.transform');
 goog.require('ol.ImageBase');
 goog.require('ol.ViewHint');
 goog.require('ol.dom');
@@ -31,9 +31,9 @@ ol.renderer.dom.ImageLayer = function(imageLayer) {

  /**
   * @private
-   * @type {ol.Matrix}
+   * @type {ol.Transform}
   */
-  this.transform_ = ol.matrix.create();
+  this.transform_ = ol.transform.create();

 };
 ol.inherits(ol.renderer.dom.ImageLayer, ol.renderer.dom.Layer);
@@ -117,11 +117,13 @@ ol.renderer.dom.ImageLayer.prototype.prepareFrame = function(frameState, layerSt
  if (image) {
    var imageExtent = image.getExtent();
    var imageResolution = image.getResolution();
-    var transform = ol.matrix.create();
-    ol.matrix.makeTransform(transform,
-        frameState.size[0] / 2, frameState.size[1] / 2,
-        imageResolution / viewResolution, imageResolution / viewResolution,
-        viewRotation,
+    var transform = ol.transform.create();
+    ol.transform.translate(transform,
+        frameState.size[0] / 2, frameState.size[1] / 2);
+    ol.transform.scale(transform,
+        imageResolution / viewResolution, imageResolution / viewResolution);
+    ol.transform.rotate(transform, viewRotation);
+    ol.transform.translate(transform,
        (imageExtent[0] - viewCenter[0]) / imageResolution,
        (viewCenter[1] - imageExtent[3]) / imageResolution);
    if (image != this.image_) {
@@ -145,12 +147,12 @@ ol.renderer.dom.ImageLayer.prototype.prepareFrame = function(frameState, layerSt


 /**
- * @param {ol.Matrix} transform Transform.
+ * @param {ol.Transform} transform Transform.
 * @private
 */
 ol.renderer.dom.ImageLayer.prototype.setTransform_ = function(transform) {
-  if (!ol.matrix.equals(transform, this.transform_)) {
+  if (!ol.array.equals(transform, this.transform_)) {
    ol.dom.transformElement2D(this.target, transform, 6);
-    ol.matrix.setFromArray(this.transform_, transform);
+    ol.transform.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('ol.matrix');
+goog.require('ol.transform');
 goog.require('ol');
 goog.require('ol.RendererType');
 goog.require('ol.array');
@@ -49,9 +49,9 @@ ol.renderer.dom.Map = function(container, map) {

  /**
   * @private
-   * @type {ol.Matrix}
+   * @type {ol.Transform}
   */
-  this.transform_ = ol.matrix.create();
+  this.transform_ = ol.transform.create();

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

-    ol.matrix.makeTransform(this.transform_,
-        canvas.width / 2,
-        canvas.height / 2,
-        pixelRatio / viewState.resolution,
-        -pixelRatio / viewState.resolution,
-        -viewState.rotation,
+    var transform = ol.transform.reset(this.transform_);
+    ol.transform.translate(transform, canvas.width / 2, canvas.height / 2);
+    ol.transform.scale(transform,
+        pixelRatio / viewState.resolution, -pixelRatio / viewState.resolution);
+    ol.transform.rotate(transform, -viewState.rotation);
+    ol.transform.translate(transform,
        -viewState.center[0], -viewState.center[1]);
    var vectorContext = new ol.render.canvas.Immediate(context, pixelRatio,
        extent, this.transform_, rotation);
--- 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('ol.matrix');
+goog.require('ol.transform');
 goog.require('ol');
 goog.require('ol.TileRange');
 goog.require('ol.TileState');
@@ -199,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 = ol.matrix.create();
+  var transform = ol.transform.create();
  for (i = 0, ii = tileLayerZKeys.length; i < ii; ++i) {
    tileLayerZKey = tileLayerZKeys[i];
    tileLayerZ = this.tileLayerZs_[tileLayerZKey];
@@ -210,13 +210,13 @@ ol.renderer.dom.TileLayer.prototype.prepareFrame = function(frameState, layerSta
    }
    resolution = tileLayerZ.getResolution();
    origin = tileLayerZ.getOrigin();
-    ol.matrix.makeTransform(transform,
-        frameState.size[0] / 2, frameState.size[1] / 2,
-        resolution / viewState.resolution,
-        resolution / viewState.resolution,
-        viewState.rotation,
-        (origin[0] - center[0]) / resolution,
-        (center[1] - origin[1]) / resolution);
+    ol.transform.translate(ol.transform.reset(transform),
+        frameState.size[0] / 2, frameState.size[1] / 2);
+    ol.transform.scale(transform,
+        resolution / viewState.resolution, resolution / viewState.resolution);
+    ol.transform.rotate(transform,  viewState.rotation);
+    ol.transform.translate(transform,
+        (origin[0] - center[0]) / resolution, (center[1] - origin[1]) / resolution);
    tileLayerZ.setTransform(transform);
    if (tileLayerZKey in newTileLayerZKeys) {
      for (j = tileLayerZKey - 1; j >= 0; --j) {
@@ -313,9 +313,9 @@ ol.renderer.dom.TileLayerZ_ = function(tileGrid, tileCoordOrigin) {

  /**
   * @private
-   * @type {ol.Matrix}
+   * @type {ol.Transform}
   */
-  this.transform_ = ol.matrix.create();
+  this.transform_ = ol.transform.create();

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


 /**
- * @param {ol.Matrix} transform Transform.
+ * @param {ol.Transform} transform Transform.
 */
 ol.renderer.dom.TileLayerZ_.prototype.setTransform = function(transform) {
-  if (!ol.matrix.equals(transform, this.transform_)) {
+  if (!ol.array.equals(transform, this.transform_)) {
    ol.dom.transformElement2D(this.target, transform, 6);
-    ol.matrix.setFromArray(this.transform_, transform);
+    ol.transform.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('ol.matrix');
+goog.require('ol.transform');
 goog.require('ol.ViewHint');
 goog.require('ol.dom');
 goog.require('ol.extent');
@@ -75,15 +75,15 @@ ol.renderer.dom.VectorLayer = function(vectorLayer) {

  /**
   * @private
-   * @type {ol.Matrix}
+   * @type {ol.Transform}
   */
-  this.transform_ = ol.matrix.create();
+  this.transform_ = ol.transform.create();

  /**
   * @private
-   * @type {ol.Matrix}
+   * @type {ol.Transform}
   */
-  this.elementTransform_ = ol.matrix.create();
+  this.elementTransform_ = ol.transform.create();

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

-  var transform = ol.matrix.makeTransform(this.transform_,
-      pixelRatio * viewWidth / 2,
-      pixelRatio * viewHeight / 2,
-      pixelRatio / viewResolution,
-      -pixelRatio / viewResolution,
-      -viewRotation,
-      -viewCenter[0], -viewCenter[1]);
+  var transform = ol.transform.reset(this.transform_);
+  ol.transform.translate(transform,
+      pixelRatio * viewWidth / 2, pixelRatio * viewHeight / 2);
+  ol.transform.scale(transform,
+      pixelRatio / viewResolution, -pixelRatio / viewResolution);
+  ol.transform.rotate(transform, -viewRotation);
+  ol.transform.translate(transform, -viewCenter[0], -viewCenter[1]);

  var context = this.context_;

@@ -133,10 +133,9 @@ ol.renderer.dom.VectorLayer.prototype.composeFrame = function(frameState, layerS
  context.canvas.width = imageWidth;
  context.canvas.height = imageHeight;

-  var elementTransform = ol.matrix.makeTransform(this.elementTransform_,
-      0, 0,
-      1 / pixelRatio, 1 / pixelRatio,
-      0,
+  var elementTransform = ol.transform.reset(this.elementTransform_);
+  ol.transform.scale(elementTransform, 1 / pixelRatio, 1 / pixelRatio);
+  ol.transform.translate(elementTransform,
      -(imageWidth - viewWidth) / 2 * pixelRatio,
      -(imageHeight - viewHeight) / 2 * pixelRatio);
  ol.dom.transformElement2D(context.canvas, elementTransform, 6);
@@ -161,7 +160,7 @@ ol.renderer.dom.VectorLayer.prototype.composeFrame = function(frameState, layerS
 /**
 * @param {ol.render.EventType} type Event type.
 * @param {olx.FrameState} frameState Frame state.
- * @param {ol.Matrix} transform Transform.
+ * @param {ol.Transform} 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,7 +10,7 @@ goog.require('ol.Observable');
 goog.require('ol.TileRange');
 goog.require('ol.TileState');
 goog.require('ol.layer.Layer');
-goog.require('ol.matrix');
+goog.require('ol.transform');
 goog.require('ol.source.State');
 goog.require('ol.source.Tile');

@@ -57,9 +57,8 @@ ol.renderer.Layer.prototype.forEachFeatureAtCoordinate = ol.nullFunction;
 * @template S,T
 */
 ol.renderer.Layer.prototype.forEachLayerAtPixel = function(pixel, frameState, callback, thisArg) {
-  var coordinate = pixel.slice();
-  ol.matrix.multVec2(
-      frameState.pixelToCoordinateMatrix, coordinate, coordinate);
+  var coordinate = ol.transform.apply(
+      frameState.pixelToCoordinateTransform, pixel.slice());

  var hasFeature = this.forEachFeatureAtCoordinate(
      coordinate, frameState, ol.functions.TRUE, this);
--- 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('ol.matrix');
+goog.require('ol.transform');
 goog.require('ol');
 goog.require('ol.Disposable');
 goog.require('ol.events');
@@ -65,17 +65,19 @@ ol.inherits(ol.renderer.Map, ol.Disposable);
 */
 ol.renderer.Map.prototype.calculateMatrices2D = function(frameState) {
  var viewState = frameState.viewState;
-  var coordinateToPixelMatrix = frameState.coordinateToPixelMatrix;
-  goog.asserts.assert(coordinateToPixelMatrix,
-      'frameState has a coordinateToPixelMatrix');
-  ol.matrix.makeTransform(coordinateToPixelMatrix,
-      frameState.size[0] / 2, frameState.size[1] / 2,
-      1 / viewState.resolution, -1 / viewState.resolution,
-      -viewState.rotation,
+  var coordinateToPixelTransform = frameState.coordinateToPixelTransform;
+  var pixelToCoordinateTransform = frameState.pixelToCoordinateTransform;
+  goog.asserts.assert(coordinateToPixelTransform,
+      'frameState has a coordinateToPixelTransform');
+  ol.transform.translate(ol.transform.reset(coordinateToPixelTransform),
+      frameState.size[0] / 2, frameState.size[1] / 2);
+  ol.transform.scale(coordinateToPixelTransform,
+      1 / viewState.resolution, -1 / viewState.resolution);
+  ol.transform.rotate(coordinateToPixelTransform, -viewState.rotation);
+  ol.transform.translate(coordinateToPixelTransform,
      -viewState.center[0], -viewState.center[1]);
-  var inverted = ol.matrix.invert(
-      coordinateToPixelMatrix, frameState.pixelToCoordinateMatrix);
-  goog.asserts.assert(inverted, 'matrix could be inverted');
+  ol.transform.invert(
+      ol.transform.setFromArray(pixelToCoordinateTransform, coordinateToPixelTransform));
 };


--- 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('ol.matrix');
+goog.require('ol.transform');
 goog.require('goog.webgl');
 goog.require('ol.ImageBase');
 goog.require('ol.ViewHint');
@@ -40,7 +40,7 @@ ol.renderer.webgl.ImageLayer = function(mapRenderer, imageLayer) {

  /**
   * @private
-   * @type {?ol.Matrix}
+   * @type {?ol.Transform}
   */
  this.hitTransformationMatrix_ = null;

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

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

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

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

 };

@@ -233,9 +233,8 @@ ol.renderer.webgl.ImageLayer.prototype.forEachLayerAtPixel = function(pixel, fra
  if (this.getLayer().getSource() instanceof ol.source.ImageVector) {
    // for ImageVector sources use the original hit-detection logic,
    // so that for example also transparent polygons are detected
-    var coordinate = pixel.slice();
-    ol.matrix.multVec2(
-        frameState.pixelToCoordinateMatrix, coordinate, coordinate);
+    var coordinate = ol.transform.apply(
+        frameState.pixelToCoordinateTransform, pixel.slice());
    var hasFeature = this.forEachFeatureAtCoordinate(
        coordinate, frameState, ol.functions.TRUE, this);

@@ -253,9 +252,8 @@ ol.renderer.webgl.ImageLayer.prototype.forEachLayerAtPixel = function(pixel, fra
          frameState.size, imageSize);
    }

-    var pixelOnFrameBuffer = [0, 0];
-    ol.matrix.multVec2(
-        this.hitTransformationMatrix_, pixel, pixelOnFrameBuffer);
+    var pixelOnFrameBuffer = ol.transform.apply(
+        this.hitTransformationMatrix_, pixel.slice());

    if (pixelOnFrameBuffer[0] < 0 || pixelOnFrameBuffer[0] > imageSize[0] ||
        pixelOnFrameBuffer[1] < 0 || pixelOnFrameBuffer[1] > imageSize[1]) {
@@ -286,35 +284,31 @@ 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 {ol.Matrix} The transformation matrix.
+ * @return {ol.Transform} 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 = 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);
+  var mapCoordTransform = ol.transform.create();
+  ol.transform.translate(mapCoordTransform, -1, -1);
+  ol.transform.scale(mapCoordTransform, 2 / mapSize[0], 2 / mapSize[1]);
+  ol.transform.translate(mapCoordTransform, 0, mapSize[1]);
+  ol.transform.scale(mapCoordTransform, 1, -1);

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

  // the third matrix scales to the image dimensions and flips the y-axis again
-  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 transform = ol.transform.create();
+  ol.transform.translate(transform, 0, imageSize[1]);
+  ol.transform.scale(transform, 1, -1);
+  ol.transform.scale(transform, imageSize[0] / 2, imageSize[1] / 2);
+  ol.transform.translate(transform, 1, 1);

-  var transformMatrix = ol.matrix.create();
-  ol.matrix.multiply(
-      imageCoordMatrix, projectionMatrixInv, transformMatrix);
-  ol.matrix.multiply(
-      transformMatrix, mapCoordMatrix, transformMatrix);
+  ol.transform.multiply(transform, projectionMatrixInv);
+  ol.transform.multiply(transform, mapCoordTransform);

-  return transformMatrix;
+  return transform;
 };
--- a/src/ol/renderer/webgl/webgllayerrenderer.js
+++ b/src/ol/renderer/webgl/webgllayerrenderer.js
@@ -2,7 +2,7 @@ goog.provide('ol.renderer.webgl.Layer');

 goog.require('goog.webgl');
 goog.require('ol.layer.Layer');
-goog.require('ol.matrix');
+goog.require('ol.transform');
 goog.require('ol.render.Event');
 goog.require('ol.render.EventType');
 goog.require('ol.render.webgl.Immediate');
@@ -63,15 +63,15 @@ ol.renderer.webgl.Layer = function(mapRenderer, layer) {

  /**
   * @protected
-   * @type {ol.Matrix}
+   * @type {ol.Transform}
   */
-  this.texCoordMatrix = ol.matrix.create();
+  this.texCoordMatrix = ol.transform.create();

  /**
   * @protected
-   * @type {ol.Matrix}
+   * @type {ol.Transform}
   */
-  this.projectionMatrix = ol.matrix.create();
+  this.projectionMatrix = ol.transform.create();

  /**
   * @private
@@ -209,7 +209,7 @@ ol.renderer.webgl.Layer.prototype.dispatchComposeEvent_ = function(type, context


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


 /**
- * @return {!ol.Matrix} Matrix.
+ * @return {!ol.Transform} 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,7 +4,7 @@
 goog.provide('ol.renderer.webgl.TileLayer');

 goog.require('goog.asserts');
-goog.require('ol.matrix');
+goog.require('ol.transform');
 goog.require('goog.webgl');
 goog.require('ol.TileRange');
 goog.require('ol.TileState');
@@ -351,21 +351,21 @@ ol.renderer.webgl.TileLayer.prototype.prepareFrame = function(frameState, layerS
  this.updateLogos(frameState, tileSource);

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

  return true;
 };
@@ -383,9 +383,8 @@ ol.renderer.webgl.TileLayer.prototype.forEachLayerAtPixel = function(pixel, fram
    pixel[0] / frameState.size[0],
    (frameState.size[1] - pixel[1]) / frameState.size[1]];

-  var pixelOnFrameBufferScaled = [0, 0];
-  ol.matrix.multVec2(
-      this.texCoordMatrix, pixelOnMapScaled, pixelOnFrameBufferScaled);
+  var pixelOnFrameBufferScaled = ol.transform.apply(
+      this.texCoordMatrix, pixelOnMapScaled.slice());
  var pixelOnFrameBuffer = [
    pixelOnFrameBufferScaled[0] * this.framebufferDimension,
    pixelOnFrameBufferScaled[1] * this.framebufferDimension];
--- a/src/ol/renderer/webgl/webglvectorlayerrenderer.js
+++ b/src/ol/renderer/webgl/webglvectorlayerrenderer.js
@@ -5,7 +5,7 @@ goog.require('ol.events');
 goog.require('ol.ViewHint');
 goog.require('ol.extent');
 goog.require('ol.layer.Vector');
-goog.require('ol.matrix');
+goog.require('ol.transform');
 goog.require('ol.render.webgl.ReplayGroup');
 goog.require('ol.renderer.vector');
 goog.require('ol.renderer.webgl.Layer');
@@ -154,9 +154,8 @@ ol.renderer.webgl.VectorLayer.prototype.hasFeatureAtCoordinate = function(coordi
 * @inheritDoc
 */
 ol.renderer.webgl.VectorLayer.prototype.forEachLayerAtPixel = function(pixel, frameState, callback, thisArg) {
-  var coordinate = pixel.slice();
-  ol.matrix.multVec2(
-      frameState.pixelToCoordinateMatrix, coordinate, coordinate);
+  var coordinate = ol.transform.apply(
+      frameState.pixelToCoordinateTransform, pixel.slice());
  var hasFeature = this.hasFeatureAtCoordinate(coordinate, frameState);

  if (hasFeature) {
--- a/src/ol/source/imagevectorsource.js
+++ b/src/ol/source/imagevectorsource.js
@@ -3,7 +3,7 @@ goog.provide('ol.source.ImageVector');
 goog.require('goog.asserts');
 goog.require('ol.events');
 goog.require('ol.events.EventType');
-goog.require('ol.matrix');
+goog.require('ol.transform');
 goog.require('ol.dom');
 goog.require('ol.extent');
 goog.require('ol.render.canvas.ReplayGroup');
@@ -40,9 +40,9 @@ ol.source.ImageVector = function(options) {

  /**
   * @private
-   * @type {ol.Matrix}
+   * @type {ol.Transform}
   */
-  this.transform_ = ol.matrix.create();
+  this.transform_ = ol.transform.create();

  /**
   * @private
@@ -211,15 +211,14 @@ ol.source.ImageVector.prototype.getStyleFunction = function() {
 * @param {number} resolution Resolution.
 * @param {number} pixelRatio Pixel ratio.
 * @param {ol.Size} size Size.
- * @return {!ol.Matrix} Transform.
+ * @return {!ol.Transform} Transform.
 * @private
 */
 ol.source.ImageVector.prototype.getTransform_ = function(center, resolution, pixelRatio, size) {
-  return ol.matrix.makeTransform(this.transform_,
-      size[0] / 2, size[1] / 2,
-      pixelRatio / resolution, -pixelRatio / resolution,
-      0,
-      -center[0], -center[1]);
+  var transform = ol.transform.reset(this.transform_);
+  ol.transform.translate(transform, size[0] / 2, size[1] / 2);
+  ol.transform.scale(transform, pixelRatio / resolution, -pixelRatio / resolution);
+  return ol.transform.translate(transform, -center[0], -center[1]);
 };


--- a/src/ol/source/rastersource.js
+++ b/src/ol/source/rastersource.js
@@ -4,7 +4,7 @@ goog.provide('ol.source.RasterEvent');
 goog.provide('ol.source.RasterEventType');

 goog.require('goog.asserts');
-goog.require('ol.matrix');
+goog.require('ol.transform');
 goog.require('ol.ImageCanvas');
 goog.require('ol.TileQueue');
 goog.require('ol.dom');
@@ -120,7 +120,7 @@ ol.source.Raster = function(options) {
  this.frameState_ = {
    animate: false,
    attributions: {},
-    coordinateToPixelMatrix: ol.matrix.create(),
+    coordinateToPixelTransform: ol.transform.create(),
    extent: null,
    focus: null,
    index: 0,
@@ -128,7 +128,7 @@ ol.source.Raster = function(options) {
    layerStatesArray: layerStatesArray,
    logos: {},
    pixelRatio: 1,
-    pixelToCoordinateMatrix: ol.matrix.create(),
+    pixelToCoordinateTransform: ol.transform.create(),
    postRenderFunctions: [],
    size: [0, 0],
    skippedFeatureUids: {},
--- a/src/ol/transform.js
+++ b/src/ol/transform.js
@@ -0,0 +1,203 @@
+goog.provide('ol.transform');
+
+/**
+ * Collection of affine 2d transformation functions. The functions work on an
+ * array of 6 elements. The element order is compatible with the [SVGMatrix
+ * interface](https://developer.mozilla.org/en-US/docs/Web/API/SVGMatrix) and is
+ * a subset (elements a to f) of a 3x3 martrix:
+ * ```
+ * [ a c e ]
+ * [ b d f ]
+ * [ 0 0 1 ]
+ * ```
+ */
+
+
+/**
+ * @private
+ * @type {ol.Transform}
+ */
+ol.transform.tmp_ = new Array(6);
+
+
+/**
+ * Create an identity transform.
+ * @return {!ol.Transform} Identity transform.
+ */
+ol.transform.create = function() {
+  return [1, 0, 0, 1, 0, 0];
+};
+
+
+/**
+ * Resets the given transform to an identity transform.
+ * @param {!ol.Transform} transform Transform.
+ * @return {!ol.Transform} Transform.
+ */
+ol.transform.reset = function(transform) {
+  return ol.transform.set(transform, 1, 0, 0, 1, 0, 0);
+};
+
+
+/**
+ * Multiply the underlying matrices of two transforms and return the result in
+ * the first transform.
+ * @param {!ol.Transform} transform1 Transform parameters of matrix 1.
+ * @param {!ol.Transform} transform2 Transform parameters of matrix 2.
+ * @return {!ol.Transform} transform1 multiplied with transform2.
+ */
+ol.transform.multiply = function(transform1, transform2) {
+  var a1 = transform1[0];
+  var b1 = transform1[1];
+  var c1 = transform1[2];
+  var d1 = transform1[3];
+  var e1 = transform1[4];
+  var f1 = transform1[5];
+  var a2 = transform2[0];
+  var b2 = transform2[1];
+  var c2 = transform2[2];
+  var d2 = transform2[3];
+  var e2 = transform2[4];
+  var f2 = transform2[5];
+
+  transform1[0] = a1 * a2 + c1 * b2;
+  transform1[1] = b1 * a2 + d1 * b2;
+  transform1[2] = a1 * c2 + c1 * d2;
+  transform1[3] = b1 * c2 + d1 * d2;
+  transform1[4] = a1 * e2 + c1 * f2 + e1;
+  transform1[5] = b1 * e2 + d1 * f2 + f1;
+
+  return transform1;
+};
+
+/**
+ * Set the transform components a-f on a given transform.
+ * @param {!ol.Transform} transform Transform.
+ * @param {number} a The a component of the transform.
+ * @param {number} b The b component of the transform.
+ * @param {number} c The c component of the transform.
+ * @param {number} d The d component of the transform.
+ * @param {number} e The e component of the transform.
+ * @param {number} f The f component of the transform.
+ * @return {!ol.Transform} Matrix with transform applied.
+ */
+ol.transform.set = function(transform, a, b, c, d, e, f) {
+  transform[0] = a;
+  transform[1] = b;
+  transform[2] = c;
+  transform[3] = d;
+  transform[4] = e;
+  transform[5] = f;
+  return transform;
+};
+
+
+/**
+ * Set transform on one matrix from another matrix.
+ * @param {!ol.Transform} transform1 Matrix to set transform to.
+ * @param {!ol.Transform} transform2 Matrix to set transform from.
+ * @return {!ol.Transform} transform1 with transform from transform2 applied.
+ */
+ol.transform.setFromArray = function(transform1, transform2) {
+  transform1[0] = transform2[0];
+  transform1[1] = transform2[1];
+  transform1[2] = transform2[2];
+  transform1[3] = transform2[3];
+  transform1[4] = transform2[4];
+  transform1[5] = transform2[5];
+  return transform1;
+};
+
+
+/**
+ * Transforms the given coordinate with the given transform returning the
+ * resulting, transformed coordinate. The coordinate will be modified in-place.
+ *
+ * @param {ol.Transform} transform The transformation.
+ * @param {ol.Coordinate|ol.Pixel} coordinate The coordinate to transform.
+ * @return {ol.Coordinate|ol.Pixel} return coordinate so that operations can be
+ *     chained together.
+ */
+ol.transform.apply = function(transform, coordinate) {
+  var x = coordinate[0], y = coordinate[1];
+  coordinate[0] = transform[0] * x + transform[2] * y + transform[4];
+  coordinate[1] = transform[1] * x + transform[3] * y + transform[5];
+  return coordinate;
+};
+
+
+/**
+ * Applies rotation to the given transform.
+ * @param {!ol.Transform} transform Transform.
+ * @param {number} angle Angle in radians.
+ * @return {!ol.Transform} The rotated transform.
+ */
+ol.transform.rotate = function(transform, angle) {
+  var cos = Math.cos(angle);
+  var sin = Math.sin(angle);
+  return ol.transform.multiply(transform,
+      ol.transform.set(ol.transform.tmp_, cos, sin, -sin, cos, 0, 0));
+};
+
+
+/**
+ * Applies scale to a given transform.
+ * @param {!ol.Transform} transform Transform.
+ * @param {number} x Scale factor x.
+ * @param {number} y Scale factor y.
+ * @return {!ol.Transform} The scaled transform.
+ */
+ol.transform.scale = function(transform, x, y) {
+  return ol.transform.multiply(transform,
+      ol.transform.set(ol.transform.tmp_, x, 0, 0, y, 0, 0));
+};
+
+
+/**
+ * Applies translation to the given transform.
+ * @param {!ol.Transform} transform Transform.
+ * @param {number} dx Translation x.
+ * @param {number} dy Translation y.
+ * @return {!ol.Transform} The translated transform.
+ */
+ol.transform.translate = function(transform, dx, dy) {
+  return ol.transform.multiply(transform,
+      ol.transform.set(ol.transform.tmp_, 1, 0, 0, 1, dx, dy));
+};
+
+
+/**
+ * Invert the given transform.
+ * @param {!ol.Transform} transform Transform.
+ * @return {!ol.Transform} Inverse of the transform.
+ */
+ol.transform.invert = function(transform) {
+  var det = ol.transform.determinant(transform);
+  goog.asserts.assert(det !== 0, 'Transformation matrix cannot be inverted.');
+
+  var a = transform[0];
+  var b = transform[1];
+  var c = transform[2];
+  var d = transform[3];
+  var e = transform[4];
+  var f = transform[5];
+
+  transform[0] = d / det;
+  transform[1] = -b / det;
+  transform[2] = -c / det;
+  transform[3] = a / det;
+  transform[4] = (c * f - d * e) / det;
+  transform[5] = -(a * f - b * e) / det;
+
+  return transform;
+};
+
+
+/**
+ * Returns the determinant of the given matrix.
+ * @param {!ol.Transform} mat Matrix.
+ * @return {number} Determinant.
+ */
+ol.transform.determinant = function(mat) {
+  return mat[0] * mat[3] - mat[1] * mat[2];
+};
--- a/src/ol/typedefs.js
+++ b/src/ol/typedefs.js
@@ -330,11 +330,11 @@ ol.MapOptionsInternal;


 /**
- * An array representing a matrix for use in {@link ol.matrix}. The array has
- * 6 elements, and the element order is `[a, b, c, d, e, f]`.
+ * An array representing an affine 2d transformation for use with
+ * {@link ol.transform} functions. The array has 6 elements.
 * @typedef {Array.<number>}
 */
-ol.Matrix;
+ol.Transform;


 /**
--- a/src/ol/vec/mat4.js
+++ b/src/ol/vec/mat4.js
@@ -8,7 +8,7 @@ ol.vec.Mat4.tmpMatrix_ = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];


 /**
- * @param {ol.Matrix} mat Transformation matrix.
+ * @param {ol.Transform} mat Transformation matrix.
 * @return {Array.<number>} 2D transformation matrix as flattened 4x4 matrix.
 */
 ol.vec.Mat4.fromMatrix = function(mat) {
--- a/test/spec/ol/dom/dom.test.js
+++ b/test/spec/ol/dom/dom.test.js
@@ -147,8 +147,8 @@ describe('ol.dom', function() {

  describe('ol.dom.transformElement2D', function() {
    var element = null;
-    var transform = ol.matrix.create();
-    var transformFloat = ol.matrix.create();
+    var transform = ol.transform.create();
+    var transformFloat = ol.transform.create();
    transformFloat[0] = 0.12345;
    beforeEach(function() {
      element = document.createElement('div');
@@ -564,5 +564,5 @@ describe('ol.dom', function() {
 });

 goog.require('goog.userAgent');
-goog.require('ol.matrix');
+goog.require('ol.transform');
 goog.require('ol.dom');
--- a/test/spec/ol/render.test.js
+++ b/test/spec/ol/render.test.js
@@ -22,16 +22,16 @@ describe('ol.render', function() {
          [0, 0, size[0] * pixelRatio, size[1] * pixelRatio]);
      expect(canvas.style.width).to.be(size[0] + 'px');
      expect(canvas.style.height).to.be(size[1] + 'px');
-      var transform = ol.matrix.makeTransform(ol.matrix.create(),
-          0, 0, pixelRatio, pixelRatio, 0, 0, 0);
-      expect(ol.matrix.equals(render.transform_, transform)).to.be.ok();
+      var transform = ol.transform.scale(ol.transform.create(),
+          pixelRatio, pixelRatio);
+      expect(ol.array.equals(render.transform_, transform)).to.be.ok();
    });
  });

 });


-goog.require('ol.matrix');
+goog.require('ol.transform');
 goog.require('ol.render');
 goog.require('ol.render.canvas.Immediate');
 goog.require('ol.vec.Mat4');
--- a/test/spec/ol/renderer/canvas/canvaslayerrenderer.test.js
+++ b/test/spec/ol/renderer/canvas/canvaslayerrenderer.test.js
@@ -23,11 +23,11 @@ describe('ol.renderer.canvas.Layer', function() {
        },
        size: [10, 10],
        pixelRatio: 1,
-        coordinateToPixelMatrix: ol.matrix.create(),
-        pixelToCoordinateMatrix: ol.matrix.create()
+        coordinateToPixelTransform: ol.transform.create(),
+        pixelToCoordinateTransform: ol.transform.create()
      };
      renderer.getImageTransform = function() {
-        return ol.matrix.create();
+        return ol.transform.create();
      };
      ol.renderer.Map.prototype.calculateMatrices2D(frameState);
      var layerState = layer.getLayerState();
@@ -62,7 +62,7 @@ describe('ol.renderer.canvas.Layer', function() {


 goog.require('ol.render.canvas');
-goog.require('ol.matrix');
+goog.require('ol.transform');
 goog.require('ol.layer.Image');
 goog.require('ol.renderer.Map');
 goog.require('ol.renderer.canvas.Layer');
--- a/test/spec/ol/renderer/webgl/webglimagelayerrenderer.test.js
+++ b/test/spec/ol/renderer/webgl/webglimagelayerrenderer.test.js
@@ -49,32 +49,30 @@ describe('ol.renderer.webgl.ImageLayer', function() {
          pixelRatio, viewCenter, viewResolution, viewRotation, imageExtent);
      var matrix = renderer.getProjectionMatrix();

-      var output = ol.matrix.create();
-
-      ol.matrix.multVec2(matrix, [-1, -1], output);
+      var output = ol.transform.apply(matrix, [-1, -1]);
      expect(output[0]).to.eql(-6);
      expect(output[1]).to.eql(-6);

-      ol.matrix.multVec2(matrix, [1, -1], output);
+      output = ol.transform.apply(matrix, [1, -1]);
      expect(output[0]).to.eql(2);
      expect(output[1]).to.eql(-6);

-      ol.matrix.multVec2(matrix, [-1, 1], output);
+      output = ol.transform.apply(matrix, [-1, 1]);
      expect(output[0]).to.eql(-6);
      expect(output[1]).to.eql(6);

-      ol.matrix.multVec2(matrix, [1, 1], output);
+      output = ol.transform.apply(matrix, [1, 1]);
      expect(output[0]).to.eql(2);
      expect(output[1]).to.eql(6);

-      ol.matrix.multVec2(matrix, [0, 0], output);
+      output = ol.transform.apply(matrix, [0, 0]);
      expect(output[0]).to.eql(-2);
      expect(output[1]).to.eql(0);
    });
  });
 });

-goog.require('ol.matrix');
+goog.require('ol.transform');
 goog.require('ol.Map');
 goog.require('ol.proj.common');
 goog.require('ol.layer.Image');