From 9029c0fdad062609d8a39e06fa34d9ba032c964c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Thu, 6 Nov 2014 09:24:47 +0100 Subject: [PATCH 1/3] Use replay maxExtent center as the coord system origin --- src/ol/render/webgl/webglreplay.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/ol/render/webgl/webglreplay.js b/src/ol/render/webgl/webglreplay.js index 66dffe6fde..0864f811d2 100644 --- a/src/ol/render/webgl/webglreplay.js +++ b/src/ol/render/webgl/webglreplay.js @@ -34,10 +34,14 @@ ol.render.webgl.ImageReplay = function(tolerance, maxExtent) { this.anchorY_ = undefined; /** + * The origin of the coordinate system for the point coordinates sent to + * the GPU. To eliminate jitter caused by precision problems in the GPU + * we use the "Rendering Relative to Eye" technique described in the "3D + * Engine Design for Virtual Globes" book. * @private * @type {ol.Coordinate} */ - this.origin_ = ol.extent.getBottomLeft(maxExtent); + this.origin_ = ol.extent.getCenter(maxExtent); /** * @type {ol.Extent} From 64a7cdf372958d1a3b78bf1ee846af5697062e63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Thu, 6 Nov 2014 09:35:47 +0100 Subject: [PATCH 2/3] Implement getImageSize in ol.style.Circle and RegularShape --- src/ol/render/webgl/webglreplay.js | 1 - src/ol/style/circlestyle.js | 8 ++++++++ src/ol/style/imagestyle.js | 6 ++++++ src/ol/style/regularshapestyle.js | 8 ++++++++ 4 files changed, 22 insertions(+), 1 deletion(-) diff --git a/src/ol/render/webgl/webglreplay.js b/src/ol/render/webgl/webglreplay.js index 0864f811d2..3bfbe613fa 100644 --- a/src/ol/render/webgl/webglreplay.js +++ b/src/ol/render/webgl/webglreplay.js @@ -506,7 +506,6 @@ ol.render.webgl.ImageReplay.prototype.setImageStyle = function(imageStyle) { goog.asserts.assert(!goog.isNull(anchor)); var image = imageStyle.getImage(1); goog.asserts.assert(!goog.isNull(image)); - // FIXME getImageSize does not exist for circles var imageSize = imageStyle.getImageSize(); goog.asserts.assert(!goog.isNull(imageSize)); var opacity = imageStyle.getOpacity(); diff --git a/src/ol/style/circlestyle.js b/src/ol/style/circlestyle.js index 0d209ba876..6c3490e17e 100644 --- a/src/ol/style/circlestyle.js +++ b/src/ol/style/circlestyle.js @@ -137,6 +137,14 @@ ol.style.Circle.prototype.getImageState = function() { }; +/** + * @inheritDoc + */ +ol.style.Circle.prototype.getImageSize = function() { + return this.size_; +}; + + /** * @inheritDoc * @api diff --git a/src/ol/style/imagestyle.js b/src/ol/style/imagestyle.js index 35c3a3ac16..bf306ab65c 100644 --- a/src/ol/style/imagestyle.js +++ b/src/ol/style/imagestyle.js @@ -132,6 +132,12 @@ ol.style.Image.prototype.getImage = goog.abstractMethod; ol.style.Image.prototype.getImageState = goog.abstractMethod; +/** + * @return {ol.Size} Image size. + */ +ol.style.Image.prototype.getImageSize = goog.abstractMethod; + + /** * @param {number} pixelRatio Pixel ratio. * @return {HTMLCanvasElement|HTMLVideoElement|Image} Image element. diff --git a/src/ol/style/regularshapestyle.js b/src/ol/style/regularshapestyle.js index 74850f1225..526724ee2e 100644 --- a/src/ol/style/regularshapestyle.js +++ b/src/ol/style/regularshapestyle.js @@ -147,6 +147,14 @@ ol.style.RegularShape.prototype.getImage = function(pixelRatio) { }; +/** + * @inheritDoc + */ +ol.style.RegularShape.prototype.getImageSize = function() { + return this.size_; +}; + + /** * @inheritDoc */ From 43756a2d592147a306d9bf5b705c12b4e8b5c3d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Thu, 6 Nov 2014 09:47:24 +0100 Subject: [PATCH 3/3] Support image scale --- examples/icon-sprite-webgl.js | 14 ++++++++------ src/ol/render/webgl/webglreplay.js | 28 ++++++++++++++++++++-------- 2 files changed, 28 insertions(+), 14 deletions(-) diff --git a/examples/icon-sprite-webgl.js b/examples/icon-sprite-webgl.js index f036b398c2..03886ffec4 100644 --- a/examples/icon-sprite-webgl.js +++ b/examples/icon-sprite-webgl.js @@ -9,9 +9,9 @@ goog.require('ol.style.Style'); var iconInfo = [ - {size: [55, 55], offset: [0, 0], opacity: 1.0}, - {size: [55, 55], offset: [110, 86], opacity: 0.75}, - {size: [55, 86], offset: [55, 0], opacity: 0.5} + {size: [55, 55], offset: [0, 0], opacity: 1.0, scale: 1.0}, + {size: [55, 55], offset: [110, 86], opacity: 0.75, scale: 1.25}, + {size: [55, 86], offset: [55, 0], opacity: 0.5, scale: 1.5} ]; var i; @@ -19,11 +19,13 @@ var i; var iconCount = iconInfo.length; var icons = new Array(iconCount); for (i = 0; i < iconCount; ++i) { + var info = iconInfo[i]; icons[i] = new ol.style.Icon({ src: 'data/Butterfly.png', - size: iconInfo[i].size, - offset: iconInfo[i].offset, - opacity: iconInfo[i].opacity + size: info.size, + offset: info.offset, + opacity: info.opacity, + scale: info.scale }); } diff --git a/src/ol/render/webgl/webglreplay.js b/src/ol/render/webgl/webglreplay.js index 3bfbe613fa..8725e1cbe5 100644 --- a/src/ol/render/webgl/webglreplay.js +++ b/src/ol/render/webgl/webglreplay.js @@ -128,6 +128,12 @@ ol.render.webgl.ImageReplay = function(tolerance, maxExtent) { */ this.projectionMatrix_ = goog.vec.Mat4.createNumberIdentity(); + /** + * @private + * @type {number|undefined} + */ + this.scale_ = undefined; + /** * @type {Array.} * @private @@ -210,6 +216,7 @@ ol.render.webgl.ImageReplay.prototype.drawCoordinates_ = goog.asserts.assert(goog.isDef(this.opacity_)); goog.asserts.assert(goog.isDef(this.originX_)); goog.asserts.assert(goog.isDef(this.originY_)); + goog.asserts.assert(goog.isDef(this.scale_)); goog.asserts.assert(goog.isDef(this.width_)); var anchorX = this.anchorX_; var anchorY = this.anchorY_; @@ -219,6 +226,7 @@ ol.render.webgl.ImageReplay.prototype.drawCoordinates_ = var opacity = this.opacity_; var originX = this.originX_; var originY = this.originY_; + var scale = this.scale_; var width = this.width_; var numIndices = this.indices_.length; var numVertices = this.vertices_.length; @@ -233,32 +241,32 @@ ol.render.webgl.ImageReplay.prototype.drawCoordinates_ = this.vertices_[numVertices++] = x; this.vertices_[numVertices++] = y; - this.vertices_[numVertices++] = -2 * anchorX; - this.vertices_[numVertices++] = -2 * (height - anchorY); + this.vertices_[numVertices++] = -2 * scale * anchorX; + this.vertices_[numVertices++] = -2 * scale * (height - anchorY); this.vertices_[numVertices++] = (originX + width) / imageWidth; this.vertices_[numVertices++] = (originY + height) / imageHeight; this.vertices_[numVertices++] = opacity; this.vertices_[numVertices++] = x; this.vertices_[numVertices++] = y; - this.vertices_[numVertices++] = 2 * (width - anchorX); - this.vertices_[numVertices++] = -2 * (height - anchorY); + this.vertices_[numVertices++] = 2 * scale * (width - anchorX); + this.vertices_[numVertices++] = -2 * scale * (height - anchorY); this.vertices_[numVertices++] = originX / imageWidth; this.vertices_[numVertices++] = (originY + height) / imageHeight; this.vertices_[numVertices++] = opacity; this.vertices_[numVertices++] = x; this.vertices_[numVertices++] = y; - this.vertices_[numVertices++] = 2 * (width - anchorX); - this.vertices_[numVertices++] = 2 * anchorY; + this.vertices_[numVertices++] = 2 * scale * (width - anchorX); + this.vertices_[numVertices++] = 2 * scale * anchorY; this.vertices_[numVertices++] = originX / imageWidth; this.vertices_[numVertices++] = originY / imageHeight; this.vertices_[numVertices++] = opacity; this.vertices_[numVertices++] = x; this.vertices_[numVertices++] = y; - this.vertices_[numVertices++] = -2 * anchorX; - this.vertices_[numVertices++] = 2 * anchorY; + this.vertices_[numVertices++] = -2 * scale * anchorX; + this.vertices_[numVertices++] = 2 * scale * anchorY; this.vertices_[numVertices++] = (originX + width) / imageWidth; this.vertices_[numVertices++] = originY / imageHeight; this.vertices_[numVertices++] = opacity; @@ -405,6 +413,7 @@ ol.render.webgl.ImageReplay.prototype.finish = function(context) { this.opacity_ = undefined; this.originX_ = undefined; this.originY_ = undefined; + this.scale_ = undefined; this.vertices_ = null; this.width_ = undefined; }; @@ -514,6 +523,8 @@ ol.render.webgl.ImageReplay.prototype.setImageStyle = function(imageStyle) { goog.asserts.assert(!goog.isNull(origin)); var size = imageStyle.getSize(); goog.asserts.assert(!goog.isNull(size)); + var scale = imageStyle.getScale(); + goog.asserts.assert(goog.isDef(scale)); if (this.images_.length === 0) { this.images_.push(image); @@ -534,6 +545,7 @@ ol.render.webgl.ImageReplay.prototype.setImageStyle = function(imageStyle) { this.opacity_ = opacity; this.originX_ = origin[0]; this.originY_ = origin[1]; + this.scale_ = scale; this.width_ = size[0]; };