Merge pull request #3448 from elemoine/webgl-image-retina

Fix WebGL image layer rendering on retina displays

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],