Fix WebGL image layer rendering on retina displays

This commit takes the device pixel ratio into account when calculating the matrix used to apply the image to the output canvas.

src/ol/renderer/webgl/webglimagelayerrenderer.js

@@ -102,6 +102,7 @@ ol.renderer.webgl.ImageLayer.prototype.prepareFrame =
 
   var gl = this.mapRenderer.getGL();
 
+  var pixelRatio = frameState.pixelRatio;
   var viewState = frameState.viewState;
   var viewCenter = viewState.center;
   var viewResolution = viewState.resolution;
@@ -131,7 +132,7 @@ ol.renderer.webgl.ImageLayer.prototype.prepareFrame =
       projection = sourceProjection;
     }
     var image_ = imageSource.getImage(renderedExtent, viewResolution,
-        frameState.pixelRatio, projection);
+        pixelRatio, projection);
     if (!goog.isNull(image_)) {
       var loaded = this.loadImage(image_);
       if (loaded) {
@@ -160,7 +161,8 @@ ol.renderer.webgl.ImageLayer.prototype.prepareFrame =
     var canvas = this.mapRenderer.getContext().getCanvas();
 
     this.updateProjectionMatrix_(canvas.width, canvas.height,
-        viewCenter, viewResolution, viewRotation, image.getExtent());
+        pixelRatio, viewCenter, viewResolution, viewRotation,
+        image.getExtent());
     this.hitTransformationMatrix_ = null;
 
     // Translate and scale to flip the Y coord.
@@ -183,6 +185,7 @@ ol.renderer.webgl.ImageLayer.prototype.prepareFrame =
 /**
  * @param {number} canvasWidth Canvas width.
  * @param {number} canvasHeight Canvas height.
+ * @param {number} pixelRatio Pixel ratio.
  * @param {ol.Coordinate} viewCenter View center.
  * @param {number} viewResolution View resolution.
  * @param {number} viewRotation View rotation.
@@ -190,8 +193,8 @@ ol.renderer.webgl.ImageLayer.prototype.prepareFrame =
  * @private
  */
 ol.renderer.webgl.ImageLayer.prototype.updateProjectionMatrix_ =
-    function(canvasWidth, canvasHeight, viewCenter,
+    function(canvasWidth, canvasHeight, pixelRatio,
-        viewResolution, viewRotation, imageExtent) {
+        viewCenter, viewResolution, viewRotation, imageExtent) {
 
   var canvasExtentWidth = canvasWidth * viewResolution;
   var canvasExtentHeight = canvasHeight * viewResolution;
@@ -199,7 +202,8 @@ ol.renderer.webgl.ImageLayer.prototype.updateProjectionMatrix_ =
   var projectionMatrix = this.projectionMatrix;
   goog.vec.Mat4.makeIdentity(projectionMatrix);
   goog.vec.Mat4.scale(projectionMatrix,
-      2 / canvasExtentWidth, 2 / canvasExtentHeight, 1);
+      pixelRatio * 2 / canvasExtentWidth,
+      pixelRatio * 2 / canvasExtentHeight, 1);
   goog.vec.Mat4.rotateZ(projectionMatrix, -viewRotation);
   goog.vec.Mat4.translate(projectionMatrix,
       imageExtent[0] - viewCenter[0],

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

@@ -6,6 +6,7 @@ describe('ol.renderer.webgl.ImageLayer', function() {
     var renderer;
     var canvasWidth;
     var canvasHeight;
+    var pixelRatio;
     var viewResolution;
     var viewRotation;
     var viewCenter;
@@ -27,6 +28,7 @@ describe('ol.renderer.webgl.ImageLayer', function() {
       // input params
       canvasWidth = 512;
       canvasHeight = 256;
+      pixelRatio = 2;
       viewResolution = 10;
       viewRotation = 0;
       viewCenter = [7680, 3840];
@@ -44,7 +46,7 @@ describe('ol.renderer.webgl.ImageLayer', function() {
     it('produces a correct matrix', function() {
 
       renderer.updateProjectionMatrix_(canvasWidth, canvasHeight,
-          viewCenter, viewResolution, viewRotation, imageExtent);
+          pixelRatio, viewCenter, viewResolution, viewRotation, imageExtent);
       var matrix = renderer.getProjectionMatrix();
 
       var input;
@@ -52,27 +54,27 @@ describe('ol.renderer.webgl.ImageLayer', function() {
 
       input = goog.vec.Vec4.createFromValues(-1, -1, 0, 1);
       goog.vec.Mat4.multVec4(matrix, input, output);
-      expect(output[0]).to.eql(-3);
+      expect(output[0]).to.eql(-6);
-      expect(output[1]).to.eql(-3);
+      expect(output[1]).to.eql(-6);
 
       input = goog.vec.Vec4.createFromValues(1, -1, 0, 1);
       goog.vec.Mat4.multVec4(matrix, input, output);
-      expect(output[0]).to.eql(1);
+      expect(output[0]).to.eql(2);
-      expect(output[1]).to.eql(-3);
+      expect(output[1]).to.eql(-6);
 
       input = goog.vec.Vec4.createFromValues(-1, 1, 0, 1);
       goog.vec.Mat4.multVec4(matrix, input, output);
-      expect(output[0]).to.eql(-3);
+      expect(output[0]).to.eql(-6);
-      expect(output[1]).to.eql(3);
+      expect(output[1]).to.eql(6);
 
       input = goog.vec.Vec4.createFromValues(1, 1, 0, 1);
       goog.vec.Mat4.multVec4(matrix, input, output);
-      expect(output[0]).to.eql(1);
+      expect(output[0]).to.eql(2);
-      expect(output[1]).to.eql(3);
+      expect(output[1]).to.eql(6);
 
       input = goog.vec.Vec4.createFromValues(0, 0, 0, 1);
       goog.vec.Mat4.multVec4(matrix, input, output);
-      expect(output[0]).to.eql(-1);
+      expect(output[0]).to.eql(-2);
       expect(output[1]).to.eql(0);
     });
   });