From 9ce3bc7f3d1eb9c03cdd73d249bfa10cefd713bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89ric=20Lemoine?= <eric.lemoine@gmail.com>
Date: Wed, 1 Apr 2015 10:40:27 +0200
Subject: [PATCH] =?UTF-8?q?Fix=20WebGL=C2=A0image=20layer=20rendering=20on?=
 =?UTF-8?q?=20retina=20displays?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit takes the device pixel ratio into account when calculating the matrix used to apply the image to the output canvas.
---
 .../renderer/webgl/webglimagelayerrenderer.js | 14 +++++++-----
 .../webgl/webglimagelayerrenderer.test.js     | 22 ++++++++++---------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/ol/renderer/webgl/webglimagelayerrenderer.js b/src/ol/renderer/webgl/webglimagelayerrenderer.js
index e5a0b54750..8f9dfb4fb6 100644
--- a/src/ol/renderer/webgl/webglimagelayerrenderer.js
+++ b/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,
-        viewResolution, viewRotation, imageExtent) {
+    function(canvasWidth, canvasHeight, pixelRatio,
+        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],
diff --git a/test/spec/ol/renderer/webgl/webglimagelayerrenderer.test.js b/test/spec/ol/renderer/webgl/webglimagelayerrenderer.test.js
index 94515a6860..dca38b538c 100644
--- a/test/spec/ol/renderer/webgl/webglimagelayerrenderer.test.js
+++ b/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[1]).to.eql(-3);
+      expect(output[0]).to.eql(-6);
+      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[1]).to.eql(-3);
+      expect(output[0]).to.eql(2);
+      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[1]).to.eql(3);
+      expect(output[0]).to.eql(-6);
+      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[1]).to.eql(3);
+      expect(output[0]).to.eql(2);
+      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);
     });
   });