ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix WebGL image layer rendering on retina displays

Browse Source 
This commit takes the device pixel ratio into account when calculating the matrix used to apply the image to the output canvas.
This commit is contained in:
Éric Lemoine
2015-04-01 10:40:27 +02:00
parent 0789604e88
commit 9ce3bc7f3d
2 changed files with 21 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/ol/renderer/webgl/webglimagelayerrenderer.js
View File

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

22
test/spec/ol/renderer/webgl/webglimagelayerrenderer.test.js
View File

@@ -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);
});
});