Test the image layer renderer's transform matrix

src/ol/renderer/webgl/webglimagelayerrenderer.js

@@ -1,6 +1,8 @@
 goog.provide('ol.renderer.webgl.ImageLayer');
 
 goog.require('goog.vec.Mat4');
+goog.require('ol.Coordinate');
+goog.require('ol.Extent');
 goog.require('ol.Image');
 goog.require('ol.ImageState');
 goog.require('ol.ViewHint');
@@ -183,23 +185,8 @@ ol.renderer.webgl.ImageLayer.prototype.renderFrame =
 
     var canvas = this.getMapRenderer().getCanvas();
 
-    var canvasExtentWidth = canvas.width * viewResolution;
+    this.updateVertexCoordMatrix_(canvas.width, canvas.height,
-    var canvasExtentHeight = canvas.height * viewResolution;
+        viewCenter, viewResolution, viewRotation, image.getExtent());
-
-    var imageExtent = image.getExtent();
-
-    var vertexCoordMatrix = this.vertexCoordMatrix_;
-    goog.vec.Mat4.makeIdentity(vertexCoordMatrix);
-    goog.vec.Mat4.scale(vertexCoordMatrix,
-        2 / canvasExtentWidth, 2 / canvasExtentHeight, 1);
-    goog.vec.Mat4.rotateZ(vertexCoordMatrix, -viewRotation);
-    goog.vec.Mat4.translate(vertexCoordMatrix,
-        imageExtent.minX - viewCenter.x,
-        imageExtent.minY - viewCenter.y,
-        0);
-    goog.vec.Mat4.scale(vertexCoordMatrix,
-        imageExtent.getWidth() / 2, imageExtent.getHeight() / 2, 1);
-    goog.vec.Mat4.translate(vertexCoordMatrix, 1, 1, 0);
 
     // Translate and scale to flip the Y coord.
     var texCoordMatrix = this.texCoordMatrix_;
@@ -211,3 +198,35 @@ ol.renderer.webgl.ImageLayer.prototype.renderFrame =
     this.texture_ = texture;
   }
 };
+
+
+/**
+ * @private
+ * @param {number} canvasWidth Canvas width.
+ * @param {number} canvasHeight Canvas height.
+ * @param {ol.Coordinate} viewCenter View center.
+ * @param {number} viewResolution View resolution.
+ * @param {number} viewRotation View rotation.
+ * @param {ol.Extent} imageExtent Image extent.
+ */
+ol.renderer.webgl.ImageLayer.prototype.updateVertexCoordMatrix_ =
+    function(canvasWidth, canvasHeight, viewCenter,
+        viewResolution, viewRotation, imageExtent) {
+
+  var canvasExtentWidth = canvasWidth * viewResolution;
+  var canvasExtentHeight = canvasHeight * viewResolution;
+
+  var vertexCoordMatrix = this.vertexCoordMatrix_;
+  goog.vec.Mat4.makeIdentity(vertexCoordMatrix);
+  goog.vec.Mat4.scale(vertexCoordMatrix,
+      2 / canvasExtentWidth, 2 / canvasExtentHeight, 1);
+  goog.vec.Mat4.rotateZ(vertexCoordMatrix, -viewRotation);
+  goog.vec.Mat4.translate(vertexCoordMatrix,
+      imageExtent.minX - viewCenter.x,
+      imageExtent.minY - viewCenter.y,
+      0);
+  goog.vec.Mat4.scale(vertexCoordMatrix,
+      imageExtent.getWidth() / 2, imageExtent.getHeight() / 2, 1);
+  goog.vec.Mat4.translate(vertexCoordMatrix, 1, 1, 0);
+
+};

test/spec/ol/renderer/webgl/imagelayer.test.js

@@ -0,0 +1,87 @@
+goog.provide('ol.test.renderer.webgl.ImageLayer');
+
+describe('ol.renderer.webgl.ImageLayer', function() {
+  describe('updateVertexCoordMatrix_', function() {
+    var map;
+    var renderer;
+    var canvasWidth;
+    var canvasHeight;
+    var viewExtent;
+    var viewResolution;
+    var viewRotation;
+    var imageExtent;
+
+    beforeEach(function() {
+      map = new ol.Map({
+        target: 'map'
+      });
+      var layer = new ol.layer.ImageLayer({
+        source: new ol.source.ImageSource({
+          extent: new ol.Extent(0, 0, 1, 1)
+        })
+      });
+      renderer = new ol.renderer.webgl.ImageLayer(map.getRenderer(), layer);
+
+      // input params
+      canvasWidth = 512;
+      canvasHeight = 256;
+      viewResolution = 10;
+      viewRotation = 0;
+      viewCenter = new ol.Coordinate(7680, 3840);
+      // view extent is 512O, 2560, 10240, 5120
+
+      // image size is 1024, 768
+      // image resolution is 10
+      imageExtent = new ol.Extent(0, 0, 10240, 7680);
+    });
+
+    afterEach(function() {
+      map.dispose();
+    });
+
+    it('produces a correct matrix', function() {
+
+      renderer.updateVertexCoordMatrix_(canvasWidth, canvasHeight,
+          viewCenter, viewResolution, viewRotation, imageExtent);
+      var matrix = renderer.getVertexCoordMatrix();
+
+      var input;
+      var output = goog.vec.Vec4.createNumber();
+
+      input = goog.vec.Vec4.createFromValues(-1, -1, 0, 1);
+      goog.vec.Mat4.multVec4(matrix, input, output);
+      expect(output[0]).toEqual(-3);
+      expect(output[1]).toEqual(-3);
+
+      input = goog.vec.Vec4.createFromValues(1, -1, 0, 1);
+      goog.vec.Mat4.multVec4(matrix, input, output);
+      expect(output[0]).toEqual(1);
+      expect(output[1]).toEqual(-3);
+
+      input = goog.vec.Vec4.createFromValues(-1, 1, 0, 1);
+      goog.vec.Mat4.multVec4(matrix, input, output);
+      expect(output[0]).toEqual(-3);
+      expect(output[1]).toEqual(3);
+
+      input = goog.vec.Vec4.createFromValues(1, 1, 0, 1);
+      goog.vec.Mat4.multVec4(matrix, input, output);
+      expect(output[0]).toEqual(1);
+      expect(output[1]).toEqual(3);
+
+      input = goog.vec.Vec4.createFromValues(0, 0, 0, 1);
+      goog.vec.Mat4.multVec4(matrix, input, output);
+      expect(output[0]).toEqual(-1);
+      expect(output[1]).toEqual(0);
+    });
+  });
+});
+
+goog.require('goog.vec.Mat4');
+goog.require('goog.vec.Vec4');
+goog.require('ol.Extent');
+goog.require('ol.Image');
+goog.require('ol.Map');
+goog.require('ol.layer.ImageLayer');
+goog.require('ol.source.ImageSource');
+goog.require('ol.renderer.Map');
+goog.require('ol.renderer.webgl.ImageLayer');